filename: 'index.html', //打包输出后的文件名称
minify: { //压缩html
removeComments: true, //删除注释
collapseWhitespace: true //删除空格
}
}),
],
}));
打包的配置中有几点需要注意：
1、配置中有一个speed-measure-webpack-plugin的插件，可以监控打包文件所花费的时间，方便具体的性能优化；
2、配置中加入了webpack-manifest-plugin生成资源清单的插件，这个插件所生成的资源清单对服务端渲染SSR非常有用，服务端可以根据当前的manifest，引入css和js文件；
3、配置中引入了purifycss-webpack和glob-all两个插件并依赖一个purify-css插件用来对css的tree-shaking。shake有摇动、抖动之意，言外之意就是通过抖动将项目中没有使用却定义了的js方法给删除，降低打包后项目的体积，很形象哈。自webpack2开始，webpack就自带了js的tree-shaking，却没有css的tree-shaking，所以我们就借助了插件来实现tree-shaking。
4、为了提高打包的速度以及降低打包后的项目体积，我们可以将项目中用到框架采用CDN的方式引入，从而将这部分框架排除在打包之外，而new HtmlWebpackPlugin配置项中的template的路径引用的index.prod.html文件就是采用CDN的方式引入的第三方的框架，区分了开发环境中的index.html。提升构建速度也可以通过DllPlugin和DLLReferencePlugin插件来实现，具体配置可参考：https://www.jb51.net/article/162789.htm
vue的项目目录：
react项目的webpack配置跟vue项目的webpack配置大同小异，这里不再多说，最后奉上package.json：
{
"name": "webpackvue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "cross-env BABEL_ENV=development webpack-dev-server --config config/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.product.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/runtime": "^7.4.4",
"autoprefixer": "^9.5.1",
"babel-loader": "^8.0.6",
"babel-plugin-import": "^1.11.2",
"clean-webpack-plugin": "^2.0.2",
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"glob-all": "^3.1.0",
"html-webpack-plugin": "^3.2.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
