webpack配置文档是基于vue/cli3.2版本的脚手架中webpack.config.js的再次配置方法，旨在让前端开发人员了解一些webpack配置。本文档是基于webpack v4.31.0版本的一些常用配置，更多配置功能请移步webpack官网：https://www.webpackjs.com
本章所有的配置都是在vue.config.js中编写。
1:打包后静态资源无法加载
使用npm run build后无法加载打包后的静态资源如图片、css等，可以在vue.config.js中添加如下配置。配置publicPath。
module.exports = {publicPath:”./” //打包后资源解析路径相对于html}复制代码2:模块分类打包
模块分类打包是webpack在打包时将标识相同的一类打包为一类js和css。只需要在动态导入的组件中添加webpackChunkName属性就可以实现分类打包。
exprot default new Router({Routes:[ { Path:”/form”, Name:”form”, Component:()=>import(/*webpackChunkName :”form”* / “@/compoents/form.vue”) }]})复制代码注意:只要使用webpackChunkName属性定义的相同值，打包后只会生成对应的一个该js和css。如动态导入组件时给menu.vue和manage.vue定义的webpackChunkName:” mema”打包后只会对应生成一个mema[hash].js和mema[hash].css文件。
3:source map配置
在vue/cli3.2里webpack.config.js中文件打包后会生成source map文件，不需要source map
Module exports = { configureWebpack :{ Devtool:””, //为空时表示不会生成source map文件 Devtool:”hidden-source-map ” //会生成source map 文件但不会出现在浏览器端的调试工具栏里 }}复制代码4:打包时不打包import导入的第三方库配置
有时候不需要将import导入的第三方库打包，可以使用extarnals配置。
Module exports = { configureWebpack :{ extarnals:{ Jquery:”jQuery” //打包时不打包jqurey } }}复制代码5：懒加载模块的配置
通过import和webpackChunkName懒加载的模块可以同时实现懒加载和分类打包，在生成环境中会大大减小包的体积。对性能有很大的提升。在生产环境中后期随着项目的不断扩大，可能每次打包完（npm run build）包的体积会很大且都会放在一个js中，导致后期项目维护升级成本增加，这时候可能需要分模块打包和懒加载配合使用。这里有一个新建的print.js文件，也有一个Index.vue组件，现在要在index.vue中通过clic事件懒加载print.js文件。
//Print.jsConsole.log(“this is printJs”)Export default()=>{Console.log(“this is function and do your want”)}复制代码//Index.vue复制代码6:离线模式下项目正常运行配置
项目上线后有时存在服务器挂机的情况，这样对用户来说不是很友好。下面的方法可以在项目服务器挂机的情况下正常加载。
步骤（1）主要使用workbox-webpack-plugin插件
安装：npm install workbox-webpack-plugin --save-dev
configureWebpack:{Plugins:[new WorkboxPlugin.GenerateSW({// 这些选项帮助 ServiceWorkers 快速启用// 不允许遗留任何“旧的” ServiceWorkersclientsClaim: true,skipWaiting: true})]}复制代码步骤（2）main.js添加如下js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
7:长效缓存机制
项目上线后的每次项目迭代，都会给用户带来停机困扰或者更新后首次加载缓慢导致用户体验大大降低，这时候就要考虑用到webpack长效缓存机制了。长效缓存其实也就是只替换更改过的文件，这样就算项目迭代更新后用户端不会首次刷新导致卡机或缓慢加载。
entry:{//将第三方库统一添加到vendor包中vendor:['vue','vue-router','ant-design-vue','vuex']},//分离runtimeoptimization:{runtimeChunk: true,},output: {filename: '[name][chunkhash].js',chunkFilename: '[name].[chunkhash].js', //chunkhash可根据包内容是否改变决定是否改变hash},复制代码Entry入口文件采用分包处理，将项目依赖的第三方库存放到同一的vendor包中。Optimization属性可以优化打包后的包，将runtime相关的js打包出来。Output输出时文件名采用chunkhash方式，webpack会根据chunk内容是否改动判断是否改变chunkhash。结合分类打包长效缓存会体现出更好的用户体验。