本书接上文，继续干活，配置一些常用插件支持uglifyjsjs压缩插件webpack默认已经有uglifyjs，只需要导入即可使用它。在webpack.config.js中配置：constpath=require('path');constwebpackDevServer=require('webpack-dev-server');constextractTextWebpackPlugin=require('extract-text-webpack-plugin');constuglify=require('uglifyjs-webpack-plugin');module.exports={模式:"开发",entry:[path.join(__dirname,'./src/entry.js'),path.join(__dirname,'./src/entry1.js'),],output:{path:path.join(__dirname,'dist'),filename:'[name].js'},module:{规则:[{测试:/\.css$/,使用:extractTextWebpackPlugin.extract({fallback:"style-loader",使用:['css-loader',]})}]},plugins:[newextractTextWebpackPlugin({filename:'index.css'}),newuglify()],devServer:{contentBase:path.join(__dirname,'dist'),host:'localhost',compress:true,port:8888}}2.html-webpack-plugin生成html，将dist目录下的index.html移动到src目录下，并删除script和cssimport标签，然后安装html-webpack-plugin包cnpminstall--save-devhtml-webpack-plugin在webpack.config.js中修改如下constpath=require('path');constwebpackDevServer=require('webpack-dev-server');constextractTextWebpackPlugin=require('extract-text-webpack-plugin');constuglify=require('uglifyjs-webpack-plugin');consthtmlWebpackPlugin=require('html-webpack-plugin')module.exports={mode:"development",条目:[path.join(__dirname,'./src/entry.js'),path.join(__dirname,'./src/entry1.js'),],输出:{path:path.join(__dirname,'dist'),filename:'[name].js'},module:{规则:[{test:/\.css$/,use:extractTextWebpackPlugin.extract({fallback:"style-loader",use:['css-loader',]})}]},插件:[newextractTextWebpackPlugin({filename:'index.css'}),newuglify(),newhtmlWebpackPlugin({缩小:{removeAttributeQuotes:true},hash:true,template:path.join(__dirname,'./src/index.html')})],devServer:{contentBase:path.join(__dirname,'dist'),host:'localhost',compress:true,port:8888}}file-loader,url-loaderhtml-withimg-loader图片处理和打包在src下创建images文件夹，分别放一张css和html的图片引入cnpminstall--save-devfile-loaderurl-loader到cnpminstall的img标签中--savehtml-withimg-loaderwebpack.config.js修改如下：constpath=require('path');constwebpackDevServer=require('webpack-dev-server');constextractTextWebpackPlugin=require('extract-text-webpack-plugin');constuglify=require('uglifyjs-webpack-plugin');consthtmlWebpackPlugin=require('html-webpack-plugin');constwebset={??publicPath:'192.168.0.175:8888/'}module.exports={mode:"development",entry:[path.join(__dirname,'./src/entry.js'),路径。加入（__dirname，'./src/entry1.js'），],输出:{路径:path.join(__dirname,'dist'),文件名:'[name].js'},模块:{规则:[{test:/\.css$/,use:extractTextWebpackPlugin.extract({fallback:"style-loader",use:['css-loader',]})},{test:/\.(png|jpg|gif)$/,use:[{loader:'url-loader',options:{limit:8192,outputPath:'images/'}}]},{test:/\.(htm|html)$/i,use:['html-withimg-loader']}]},插件：[newextractTextWebpackPlugin({filename:'index.css'}),newuglify(),newhtmlWebpackPlugin({minify:{removeAttributeQuotes:true},hash:true,template:path.join(__dirname,'./src/index.html')})],devServer:{contentBase:path.join(__dirname,'dist'),host:'localhost',压缩:true,port:8888}}4.配置babel（很重要，让浏览器支持es6语法）cnpminstallbabel-loaderbabel-corebabel-preset-env在webpack.config.js中添加loader：找到后跟进time打包jquery和第三方插件的webpack的配置。.....
