即文件按照类型放在一起，html文件直接放在该目录下，可是我们上面的配置的输出结果是混合在一起的。由于name属性既可以是文件名，也可以是 /dir/a 之类带有路径的文件名，我们根据这个特点做出一些修改。
直接对output的输出路径更改
比如改为 build/js ,其他资源利用相对路径比如 ../page1.html 进行修改。我一开始就这样做的，但最终会导致开发服务器无法响应文件的变化，因为他只能针对输出目录下的文件进行监听，该目录之上的文件变化无能为力。
修改入口名称
这也是我们的最终解决方案。将原来的文件名 page1 修改为 /js/page1 ，最终输出的js文件便都会放在js文件夹里。在生产环境下我们通过 MiniCssExtractPlugin 这个插件提取js文件中的css，这是该插件的配置：
new MiniCssExtractPlugin({ filename:'[name].[contenthash].css' })
这里的name就是当初入口的名字，受到入口名称更改的影响，上面最终会变成 js/page1.131de8553ft82.css ，并且该占位符[name]只在编译时有效，这意味着无法用函数对该值进行处理。因此不能使用[name]占位符达到想要的目的，干脆只用[id]。
new MiniCssExtractPlugin({ filename:'/css/[id].[contenthash].css' })
3.代码分割
在webpack4中使用optimization.splitChunks进行分割.
//webpack.common.js const path = require('path'); module.exports = { // ... 省略其他内容 optimization:{ runtimeChunk:{ name:'./js/runtime' }, splitChunks:{ // 避免过度分割，设置尺寸不小于30kb //cacheGroups会继承这个值 minSize:30000, cacheGroups:{ //vue相关框架 main:{ test: /[\\/]node_modules[\\/]vue[\\/]/, name: './js/main', chunks:'all' }, //除Vue之外其他框架 vendors:{ test:/[\\/]node_modules[\\/]?!(vue)[\\/]/, name: './js/vendors', chunks:'all' }, //业务中可复用的js extractedJS:{ test:/[\\/]src[\\/].+\.js$/, name:'./js/extractedJS', chunks:'all' } } } } };
runtimeChunk包含了一些webapck的样板文件，使得你在不改变源文件内容的情况下打包，哈希值仍然改变，因此我们把他单独提取出来，点这儿了解更多。 cacheGroups用于提取复用的模块，test会尝试匹配（ 模块的绝对路径||模块名 ），返回值为true且满足条件的模块会被分割。满足的条件可自定义，比如模块最小应该多大尺寸、至少被导入进多少个chunk（即复用的次数）等。默认在打包前模块不小于30kb才被会分割。
4.树抖动
在package.json里加入
"sideEffects"：["*.css","*.less","*.sass"]
该数组之外的文件将会受到树抖动的影响——未使用的代码将会从export导出对象中剔除。这将大大减少无用代码。如果树抖动对某些文件具有副作用，就把这些文件名放进数组以跳过此操作。css文件（包括.less,.sass）都必须放进来，否则会出现样式丢失。
5. 插件的使用
5.1 clean-webpack-plugin
每次打包后都会生成新的文件，这可能会导致无用的旧文件堆积，对于这些无用文件自己一个个删太麻烦，这个插件会在每次打包前自动清理。实际中，我们不想在开发环境下清理掉build命令生成的文件，因此只在生产环境使用了这个插件。
5.2 html-Webpack-plugin
我们的源码目录中并没有html文件，打包后的多个html文件，就是我们用这个插件生成的。
//webpack.common.js // ...省略上面已经出现过的内容 //每个html需要一个插件实例 //批量生成html文件 const createPluginInstance = (list = []) => ( list.map((item) => { return new HtmlWebpackPlugin({ filename: item.filename ? `${item.filename}.html` : `${item}.html`, template: item.template ? `./public/${item.template}` : './public/template.html', title: item.title ? item.title : item, chunks: [ `./js/${item.filename ? item.filename : item}`, './js/extractedJS', './js/vendors', './js/main', './js/runtime', './css/styles.css', devMode ? './css/[id].css' : './css/[id].[contenthash].css', ], }); }) );