webpack打包优化（vue）
：使⽤ vue-cli ⾃动构建的项⽬，没有webpack的设置⽂件；需要更改webpack 设置可以在fig.js中进⾏修改configureWebpack：返回⼀个对象
chainWebpack：函数的链式操作
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const path = require('path')
function resolve(dir){
return path.join(__dirname,dir)
}
publicPath: './', // router hash 模式使⽤
outputDir: 'dist',//输出内容的⽂件夹
assetsDir: 'static',//编译内容的⽂件夹
productionSourceMap: false,// 打包时不会⽣成 .map ⽂件，加快打包速度
lintOnSave: false ,//关闭格式检查
devServer: { // 开发服务器
host: needHost,
port: port,
open: false,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'xxxxxxx',
secure: false,
changeOrigin: true, //是否跨域
logLevel: 'debug',
pathRewrite: {
'^/api': '' // pathRewrite 表⽰的意思是 把/api 替换为空        }
}
}
},
configureWebpack: {
optimization: {
runtimeChunk: true
},
plugins: [
new ScriptExtHtmlWebpackPlugin({
inline: /runtime~.+\.js$/  //正则匹配runtime⽂件名
})
]
},
chainWebpack: config => {
/
/ set preserveWhitespace
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
optionspilerOptions.preserveWhitespace = true
return options
})      .end()
config.v.NODE_ENV === 'development', config => config.devtool('cheap-source-map')) //设置调试查看源代码
config.optimization.splitChunks({
chunks:'all',
cacheGroups:{
commons:{
name:'chunk-commons',
test:resolve('src/components'),
minChunks:3,
priority:5,
reuseExistingChunk:true
},
libs:{
name:'chunk-libs',
chunks:'initial',
test:/[\\/]node_modules[\\/]/,
priority:10
}
}
})
config.plugin('preload')
.tap(args => {
args[0].fileBlacklist.push(/runtime~.+\.js$/) //正则匹配runtime⽂件名，去除该⽂件的preload
return args
})
}
}
⼯具模块
const path = require('path')
function resolve(dir){
return path.join(__dirname,dir)
}
基础配置
publicPath: './', // router hash 模式使⽤
outputDir: 'dist',//输出内容的⽂件夹
assetsDir: 'static',//编译内容的⽂件夹
productionSourceMap: false,// 打包时不会⽣成 .map ⽂件，加快打包速度  lintOnSave: false ,//关闭格式检查
开发服务器代理
devServer: { // 开发服务器
host: needHost,
port: port,
open: false,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'xxxxxxx',
secure: false,
changeOrigin: true, //是否跨域
logLevel: 'debug',
pathRewrite: {
'^/api': '' // pathRewrite 表⽰的意思是 把/api 替换为空        }
}
}
},
快捷引⽤
/webpack打包流程 面试
/ resolve.alias 设置引⼊别名
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components')) preserveWhitespace
vue打包保留标签的空⽩
cheap-source-map
根据环境变量， 设置调试查看源代码
/*