引入Webpack管理工具的原因在项目打包上线时，我们需要将ES6语法转换成ES5语法，scss语法转换成浏览器可以识别的css文件，jQuery语法转换成js文件，vue文件转换成js文件，将各种开发环境的文件压缩成压缩文件，提高项目运行速度。模块化使我们能够将复杂的项目分解成更小的文件。webpack的好处是，当css语法前面有兼容前缀的时候，你记不住，打包启动的时候webpack会自动帮你加上前缀。项目安装推荐安装Webpack。由于webpack不断更新，全局安装会影响新版本安装失败。不必要地混淆项目。步骤如下：1.安装node，并全局安装2.进入项目3.npminit生成package.json文件4.npminstallwebpackwebpack-cli--savedev(使用4以上版本installcli)5.如果是mac版本，命令前要加上sudo6.webpack-v7。安装完成后，node_modules包管理工具中会出现很多需要的包。这个时候不好用webpack-v查看webpack版本号，因为此时webpack在项目中的node_modules文件夹下。未找到全局视图版本。创建一个webpack.config.js文件所有相关的webpack配置文件都需要填写constpath=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:[],//Plugins是用来产生模板和各种功能devSever:{}//配置webpack开发服务功能}在package.json文件下配置我们的命令"scripts":{'build':'webpack',}运行命令的时候写build是npmrunbuild创建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地址，也可以写localhostport:8081,compress:true//是否开启服务器压缩open:true//自动打开页面hot:true//实时局部刷新}3.在packjson文件中配置“scripts”：{'build':'webpack','dev':'webpack-dev-server'}4.创建热更新最后在webpack.config.js文件中引入插件配置插件[newwebpack.HotModuleReplacementPlugin()]HTML打包1.安装插件npminstallhtml-webpack-plugin--savedevnpm安装完成后就是完成，相当于安装在node_modules中，所以使用的时候要在webpack.config.js文件中引入constHtmlWebpackPlugin=require("html-webpack-plugin");plugins[newwebpack.HotModuleReplacementPlugin(),newwebpack.HtmlWebpackPlugin({minify:{removeAttributeQuotes:true//去掉属性的双引号collapseWhitespace:true//折叠空白},hash:true,//为了在js模板中有缓存效果:'./src/index.html'//要打包的html模板和路径名})]多页应用打包SPA单页应用当每个html文件对应不同的js文件，可以在webpack.config.js文件中配置新的webpack.HtmlWebpackPlugin，添加{filename:'b.html'chunks:['index']//对应的js文件名title:'index-title'//修改html文件的标题}CSS打包1.入口js文件中从'./css/index.css'导入css2.下载插件：style-loader：用于处理css文件中的url,url挂载到js文件css-loader:用于在页面的style标签中插入cssnpminstall--save-devstyle-loadernpminstall--save-devcss-loader3.在webpack.config.js文件中配置module:{rules:[{test:/\.css$/,//过滤以.css结尾的文件use:['style-loader','css-loader']//usestyle-loader和css-loader解析文件}]}css文件在打包的时候和js文件分开有时候我们不希望打包后的文件js和css在一个文件里，所以分开1.参考插件const介绍webpack.config.js文件中的ExtractTextPlugin=require("extract-text-webpack-plugin")2.安装npminstall--save-devextract-text-webpack-plugin@next以安装最新版本3.配置模块:{rules:[{test:/\.css$/,//过滤以.css结尾的文件use:ExtractTextPlugin.extract({fallback:'style-loader',use:'css-loader'})//使用style-loader和css-loader解析文件}]}plugins[newExtractTextPlugin("css/index.css")]css文件会自动与html关联，将图片打包成CSS1.安装npm安装--save-devfile-loaderurl-loader2。Configurationmodule:{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',//指定加载器options的配置参数:{limit:500,outputPath:'images/'}}]}]}html图片打包https://github.com/wzsxyz/html-withimg-loadermodule:{规则:[{test:/\.(htm|html)$/iloader:'html-withimg-loader'}]}
