大纲1.webpack基本使用（打包js）2.拆分配置（将配置文件拆分为三个：基础配置、生产配置、开发配置，省去打包前手动修改模式配置（生产或开发））；合并配置（合并生产，或者开发配置与基础配置，使用webpack-merge插件实现）3.学习webpack-dev-serve的使用（配置接口路径，代码变更页面自动更新）4.webpack打包css（webpack默认只能打包js）5.webpack处理图片6.多入口（输出多个html文件）1.webpack最基本的使用1.webpack.config.jsconstpath=require('path')constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={mode:'development',//模式，不写默认是开发模式（不压缩，不删空格，注释）,'production'（生产模式）entry:{//包入口main:'./src/index.js'},output:{//打包输出文件名:'[name].js'//打包输出文件名,[name]===main(entryfile)path:path.resolve(_dirname,'dist')//打包输出路径},plufins:[//pluginnewHtmlWebpackPlugin({template:'./src/index.html'})]}2.package.json//配置打包命令{"scripts":{"build":"webpack"}}3.执行打包npmrunbuild2。拆分和合并配置1。在src2同级目录下创建build文件夹。创建一个新的webpack.base.config。js文件//基础配置新建webpack.dev.config.js文件//开发配置新建webpack.prod.config.js文件//生产配置3.webpack.base.config.jsconstpath=require('path')constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:{main:'./src/index.js'},output:{文件名:'[name].js'path:path.resolve(_dirname,'dist')},plufins:[newHtmlWebpackPlugin({template:'./src/index.html'})]}4.webpack.dev。config.jsconstcommonConfig=require('./webpack.base.consfig.js');//引入基本配置const{smart:merge}=require('webpack-merge')//引入webpack的smart方法-mergemodule(formerging)constdevConfig={//开发模式configurationmode:;'development'}module.exports=merge(commonConfig,devConfig)//合并基础配置和开发配置5.webpack.prod.config.jsconstcommonConfig=require('./webpack.base.consfig.js');//引入基础配置const{smart:merge}=require('webpack-merge')//引入webpack-merge的smart方法(formerging)constprodConfig={//生产模式配置mode:;'production'}module.exports=merge(commonConfig,prodConfig)//合并基础配置和生产配置6.package.json//配置打包命令{"scripts":{"build:dev":"webpack--config./build/webpack.dev.config.js","build":"webpack--config./build/webpack.prod.config.js",}}3.webpack-dev-serve的使用1.实现代码修改页面自动更新1.1.webpack.dev.config.jsconstdevConfig={//开发模式配置mode:;'development',devServer:{port:8080,//服务器启动端口8080contentBase:'./dist',//服务器静态资源文件夹progress:true,//打包时显示进度条open:true,//启动服务器后自动打开浏览器compress:true//启用gzip压缩}}1.2.package.json//Configuration打包命令{"scripts":{"dev":"webpack-dev-server--config./build/webpack.dev.config.js"}}2.接口地址代理转发（接口相对路径补全）axios.get('/api/project/userinfo').then(res=>{})1.webpack.dev.config.jsconstdevConfig={//开发模式configurationmode:;'development',devServer:{port:8080,//服务器启动端口8080contentBase:'./dist',//服务器静态resourcefolderprogress:true,//打包时显示进度条open:true,//启动服务器后，自动打开浏览器compress:true//启用gzip压缩},proxy:{//代理'/api/project':{//发送到'/api/project'的请求被转发到'http://baidu.com'target:'http://baidu.com',changeOrigin:true,pathRewrite:{//路径重写，假设你请求的路径统一写在/api开头，而后台接口没有，则过滤掉'^/api':''}}}}4.webpack打包css（loader执行顺序是从下往上）1.webpack.base.config.jsmodule.exports={module:{rules:[{test:/\.css&$/,//Sequenceloader:['style-loader',//将样式插入页面样式标签//2'css-loader'//处理css文件之间的依赖关系，@importstyles引入关系//1]}]，规则：[...]}，}2。添加处理css兼容加载器//'postcss-loader'使用'postcss-loader'页面渲染效果transform:rotate(-45deg)=>-webkit-transform:rotate(-45deg)transform:rotate(-45deg)1.webpack.base.config.jsmodule.exports={模块：{规则：[{测试：/\.css&$/，加载器：['style-loader',//将样式插入到页面的style标签中'css-loader'//处理css文件之间的依赖关系，@importstyleimportrelationship'postcss-loader'//需要安装autoprefixer插件-在]}]},}2.创建一个postcss.config.js文件module.exports={plugins:[require('autoprefixer')]}3.package.json//添加"browserslist"与"scriptrs"同级:[">1%"，“最后2个版本”]3。添加预编译加载器-略5.webpack处理比较小的图片，转成base64格式，可以减少http请求比较大的图片，还是和file-loader一样，单独打包到img文件夹下，发送一个请求获取，防止页面第一次渲染过慢importimgfrom'./img/1.png';//webpack默认处理不了1.开发环境使用file-loaderfile-loader导入的图片会放在dist目录下//webpack.dev.config.jsmodule:{rules:[{test:/\.(png|jpg)$/,loader:'file-loader'}]}2.生产环境使用url-loader进行base64转码//webpack.prod.config.jsmodule:{rules:[{test:/\.(png|jpg)$/,use:{loader:'url-loader',options：{limit:5*1024,//小于5kb转码outputPath:'/img/'//将大图打包到dist/img文件夹中}}}]}6.多入口//webpack.base.config.jsentry:{index:'./src/index.js',other:'./src/other.js'},plugins:[newHtmlWebpackPlugin({template:'./src/index.html',filename:'index.html',chunks:['index']}),newHtmlWebpackPlugin({template:'./src/other.html',filename:'other.html',chunks:['other']}),]7.将上面打包好的css代码从css中提取出来。并没有单独打包成css文件，而是打包在main.js中，插入到页面样式标签中引入。现在想打包成css文件，link方法引入//webpack.prod.config.jsconstMiniCSSExtractPlugin=require('mini-css-extract-plugin');//用来打包生成css文件constTerserPlugin=require('terser-webpack-plugin');constOptimizeCssAssetWebpackPlugin=require('optimize-css-asset-webpack-plugin')plugins:[newMiniCSSExtractPlugin({filename:'css/main.[contentHash:8].css'//[contentHash:8]设置缓存})],优化optimization:{minimizer:[//压缩jsnewTerserPlugin(),//压缩cssnewOptimizeCssAssetWebpackPlugin()]},module:{rules:[{test:/\.css&$/,loader:[MiniCSSExtractPlugin.loader,'css-loader'//处理css文件之间的依赖关系，@import样式导入关系'postcss-loader'//需要安装autoprefixer插件]}]},
