由于vue-cli3将webpack的基础配置全部内嵌了,这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了,那该怎么办呢?别慌,vue-cli3早就考虑到了这一点,它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。
在项目根目录下新建vue.config.js文件与package.json同级
下面说几个优化配置
1.配置别名alias
项目中使用引入文件有时候路径比较深,需要使用"…/…/…/xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。
首先,先确定项目中是否有path模块,如果没有的话需要先安装path
npm install path --save
以下为vue.config.js配置
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('imgs', resolve('src/assets/imgs'))
.set('components', resolve('src/components'))
.set('http', resolve('src/http'))
.set('utils', resolve('src/utils'))
.set('views', resolve('src/views'))
},
}
使用方法
2.开启gizp压缩
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。
安装npm
npm install -D compression-webpack-plugin
在vue.config.js中配置
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css$/,
// 超过10k才压缩
threshold: 10240,
// 是否删除源文件
deleteOriginalAssets: false
})
]
}
}
},
}
3.打包时去除打印信息(console)
项目开发阶段经常需要console一些测试数据,查看开发过程中遇到的问题,但生产环境中这些console数据需要清掉。
本来想着使用uglifyjs-webpack-plugin
,但是实际上使用这个插件会报错无法使用(可能是由于es6没有转成es5造成的),所以这里推荐使用terser-webpack-plugin
代替,实现生产去除 console.log
安装npm
npm install terser-webpack-plugin --save-dev
在vue.config.js 配置
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false, // 传递true以在中返回压缩机警告result.warnings。使用该值可"verbose"获取更详细的警告。
parse: {},
compress: {
drop_console: true, // 移除console
drop_debugger: true, // 移除debugger
pure_funcs: ['console.log'] // 移除console
}
}
})
]
}
}
}
},
}
完整的webpack配置如下:
// vue.config.js
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin') // 引入删除console插件
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/uduhs-ui/' : '/', // 这个地址跟nginx的地址相关
outputDir: 'dist',
assetsDir: 'static',
// 打包gzip
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false, // 传递true以在中返回压缩机警告result.warnings。使用该值可"verbose"获取更详细的警告。
parse: {},
compress: {
drop_console: true, // 移除console
drop_debugger: true, // 移除debugger
pure_funcs: ['console.log'] // 移除console
}
}
})
]
},
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css$/,
// 超过10k才压缩
threshold: 10240,
// 是否删除源文件
deleteOriginalAssets: false
})
]
}
}
},
filenameHashing: true,
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: false,
// 默认情况下 babel-loader 忽略其中的所有文件 node_modules
transpileDependencies: [],
// 生产环境 sourceMap,打包时不生成.map文件 避免看到源码
productionSourceMap: false,
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type =>
addStyleResource(config.module.rule('less').oneOf(type))
)
config.resolve.alias
.set('@', resolve('src'))
.set('imgs', resolve('src/assets/imgs'))
.set('components', resolve('src/components'))
.set('http', resolve('src/http'))
.set('utils', resolve('src/utils'))
.set('views', resolve('src/views'))
},
/* // 配置高于chainWebpack中关于 css loader 的配置
css: {
// 是否开启支持 foo.module.css 样式
modules: false,
// 是否使用 css 分离插件 ExtractTextPlugin,采用独立样式文件载入,不采用 <style> 方式内联至 html 文件中
extract: false,
// 是否构建样式地图,false 将提高构建速度
sourceMap: false,
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}, */
devServer: {
open: true,
port: 777, // 端口号
https: false,
hotOnly: false,
// proxy: {
// '/api': {
// target: '', // 本地地址
// changeOrigin: true,
// ws: true
// },
// '/foo': {
// target: '<other_url>'
// }
// },
before: app => { }
},
// 构建时开启多进程处理 babel 编译
parallel: require('os').cpus().length > 1,
pwa: {},
// 第三方插件配置
pluginOptions: {}
}
// function addStyleResource (rule) {
// rule
// .use('style-resource')
// .loader('style-resources-loader')
// .options({
// patterns: [
// path.resolve(__dirname, 'src/assets/css/styles/global.less') // 需要全局导入的less
// ]
// })
// }