引入Webpack管理工具的原因项目打包上线的时候，需要我们将ES6语法转化成ES5语法，scss语法转化成浏览器能识别的css文件，jQuery语法转化成为js文件，vue文件转化成js文件，将各种开发环境的文件压缩成压缩文件，提高项目运行速度。模块化使我们将复杂的项目细化为小的文件。webpack好处，当css语法前有为了兼容的前缀你记不住，webpack打包上线的时候会自动帮你添加前缀。安装Webpack建议项目安装，由于webpack不断更新所以安装到全局会影响新版本的安装失败。给项目造成不必要的困惑。步骤如下：1.安装node，全局安装即可2.进入项目3.npm init生成package.json文件4.npm install webpack webpack-cli –save dev（使用4以上版本才装cli）5.如果是mac版本，应该在命令前面添加sudo6.webpack -v7.安装完成之后，很多需要的包会在node_modules包管理工具中，此时再用webpack -v查看webpack版本号就不好使了，因为此时webpack在项目中的node_modules文件夹中。全局查看版本找不到。建立webpack.config.js文件有关webpack配置的文件都需要在这里面填写const path=require(“path”);module.exports={ mode:‘production’,//生产环境下 mode:‘development’,//开发环境下 entry:{//入口配置文件 XX:’./src/index.js’ }, output:{//出口配置文件 path:path.resolve(__dirname,’./dist’) //path下有很多方法 filename:’[name].js’//文件的名字 } module:{}//模块解读css，图片如何压缩 plugins：[],//插件用于生产模板和各项功能 devSever:{}//配置webpack开发服务功能 }在package.json文件下配置我们的命令"scripts":{ ‘build’:‘webpack’,}运行命令的时候，写的是build就是npm run build创建webpack热服务1.安装webpack-dev-server，安装完成之后在package.json中找到devDependencies查看是否有webpack-dev-server的版本号。2.在webpack.config.js文件中配置//配置webpack开发服务功能devServer:{ contentBase:path.resolve(__dirname,’./dist’), //设置基本目录结构 host:‘127.0.0.1’, //服务器的IP地址，也可以写localhost port:8081, compress:true//服务器压缩是否开启 open:true//自动打开页面 hot:true //实时局部刷新}3.packjson文件中配置"scripts":{ ‘build’:‘webpack’, ‘dev’:‘webpack-dev-server’}4.创建热更新最后要引入插件在webpack.config.js文件中配置plugins[ new webpack.HotModuleReplacementPlugin()]HTML打包1.安装插件npm install html-webpack-plugin –save devnpm安装完成之后相当于被安装到了node_modules中，所以在使用时，应当将其引入到webpack.config.js文件中const HtmlWebpackPlugin=require(“html-webpack-plugin”);plugins[ new webpack.HotModuleReplacementPlugin(), new webpack.HtmlWebpackPlugin({ minify:{ removeAttributeQuotes:true //去掉属性的双引号 collapseWhitespace: true //折叠空白区域 }, hash:true, //为了js中有缓存效果 template:’./src/index.html’ //要打包的html模板和路径名称 })]多页面应用打包SPA单页面应用当每个html文件对应不同的js文件的时候，可以在webpack.config.js文件中，配置new webpack.HtmlWebpackPlugin中添加{ filename:‘b.html’ chunks：[‘index’] //对应的js文件名称 title:‘index-title’ //修改html文件的title}CSS打包1.在入口js文件中 import css from ‘./css/index.css'2.下载插件：style-loader:用来处理css文件中的url，将url挂载到js文件中css-loader:用来将css插入到页面的style标签中npm install –save-dev style-loadernpm install –save-dev css-loader3.在webpack.config.js文件中配置module:{ rules:[ { test:/.css$/, //过滤文件以.css结尾的文件 use:[‘style-loader’,‘css-loader’] //利用style-loader和css-loader来解析文件 } ]}CSS文件打包时和js文件分离有时我们不希望打包后的文件js和css在一个文件里，所以将其分离1.引用插件 在webpack.config.js文件中引入const ExtractTextPlugin=require(“extract-text-webpack-plugin”)2.安装 npm install –save-dev extract-text-webpack-plugin@next以最新版本安装3.配置module:{ rules:[ { test:/.css$/, //过滤文件以.css结尾的文件 use:ExtractTextPlugin.extract({ fallback:‘style-loader’, use:‘css-loader’ }) //利用style-loader和css-loader来解析文件 } ]}plugins[ new ExtractTextPlugin(“css/index.css”)]css文件会自动关联html中将CSS中的图片打包1.安装npm install –save-dev file-loader url-loader2.配置module:{ rules:[ { test:/.css$/, //过滤文件以.css结尾的文件 use:[‘style-loader’,‘css-loader’] //利用style-loader和css-loader来解析文件 }, { test：/.(png|jpg|gif)/, // test:/.(png|jpg|gif)/ 是匹配文件的后缀 use:[{ loader:‘url-loader’, //指定loader的配置参数 options:{ limit:500, outputPath：‘images/’ } }] } ]}html中的图片打包https://github.com/wzsxyz/html-withimg-loadermodule:{ rules:[ { test:/.(htm|html)$/i loader:‘html-withimg-loader’ } ]}