默认会将所有的入口文件，代码分割后的文件打包进一个html文件里，通过指定 chunks 属性来告诉插件 只包含 哪些块，或者exludeChunks指定不应包含那些chunks。这里有个小问题，我们无法让文件刚好只包含他需要的块。若想不包含未使用的chunks，只能根据实际情况手动配置，用这个函数批量生成的文件，总会包含所有的公共打包文件。
5.3 mini-css-extract-plugin (prooduction)
该插件用于提取js文件中的css到单独的css文件中。
//webpack.prod.js //...省略其他内容 plugins:[ new CleanWebpackPlugin('build'), // 提取css new MiniCssExtractPlugin({ filename:'./css/[id].[contenthash].css' }), //优化缓存 new webpack.HashedModuleIdsPlugin() ]
5.4 optimize-css-assets-webpack-plugin （production）
用于精简打包后的css代码，设置在配置optimization的minimizer属性中，这将会覆盖webpack默认设置，因此也要同时设置js的精简工具(这里我们用uglifyplugin插件)：
optimization: { minimizer:[ new UglifyJsPlugin({ cache: true, parallel: true }), new OptimizeCSSAssetsPlugin() ] }
6.开发服务器、热模块替换 (development)
webpack.dev.js中增加如下内容即可：
//...省略其他内容 devServer:{ index:'index.html', hot:true, contentBase:path.resolve(__dirname,'./build'), port:3000, noInfo:true }, plugins:[ new webpack.HotModuleReplacementPlugin() ]
使用开发服务器可以在我们修改了源文件后自动刷新,因为是将数据放在内存中，因此不会影响硬盘中build文件夹。热模块替换还需要在源文件做相应修改。我们也为动态导入语法进行了相应配置。
7.其他
public用于存放静态资源，打包后也会在build/下创建一个同名文件夹，里面存放的是public会被使用到的资源。如果在.css文件里引用了public里的资源，如图片，添加url的时候要使用绝对路径：
<!-- src/css/page1.css --> .bg-img { background-image:url(/public/images/1.jpg) }
这样通过 http/https 打开的时候就能正常使用，如果是以文件形式打开（比如打包后双击page1.html），会发现浏览器显示无法找到资源。通过导入图片作为变量引用（ import name from path ），既可使用绝对路径，也可使用相对路径。
总结
以上所述是小编给大家介绍的webpack4打包vue前端多页面项目，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: