vue-cli3搭建项目之webpack配置

转自：https://blog.csdn.net/u014440483/article/details/87267160

1.在项目根目录下新建vue.config.js文件与package.json同级

官方文档

const path = require('path');

let developmentPath='./';//开发环境-npm run serve时引用文件路径

let productionPath='./';//生产环境-npm run build打包后引用文件路径

module.exports = {

publicPath: process.env.NODE_ENV === 'production' ? productionPath: developmentPath, // 基本路径-引用文件的路径

outputDir: 'dist', // 输出文件目录

lintOnSave: false, // eslint-loader 是否在保存的时候检查// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md// webpack配置

chainWebpack: (config) => {

},

configureWebpack: (config) => {

if (process.env.NODE_ENV === 'production') {

// 为生产环境修改配置...

config.mode = 'production'

} else {

// 为开发环境修改配置...

config.mode = 'development'

}

Object.assign(config, {

// 开发生产共同配置 resolve: {

alias: {

'@': path.resolve(__dirname, './src'),

'@c': path.resolve(__dirname, './src/components'),

'@p': path.resolve(__dirname, './src/pages')

} // 别名配置 }

})

},

productionSourceMap: false, // 生产环境是否生成 sourceMap 文件// css相关配置 css: {

extract: true, // 是否使用css分离插件 ExtractTextPlugin

sourceMap: true, // 开启 CSS source maps? loaderOptions: {

css: {}, // 这里的选项会传递给 css-loader//postcss: {} // 这里的选项会传递给 postcss-loader

}, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions

requireModuleExtension: true// 启用 CSS modules for all css / pre-processor files. },

parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。

pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa// webpack-dev-server 相关配置 devServer: {

open: process.platform === 'darwin',

host: '0.0.0.0', // 允许外部ip访问

port: 8080, // 端口

https: false, // 启用https overlay: {

warnings: true,

errors: true

}, // 错误、警告在页面弹出 proxy: {

'/api': {

target: 'http://localhost/api',

changeOrigin: true, // 允许websockets跨域// ws: true, pathRewrite: {

'^/api': ''

}

}

} // 代理转发配置，用于调试环境 },

// 第三方插件配置 pluginOptions: {}

}

2.优化打包chunk-vendors.js文件体积过大

当运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js;

/*

利用splitChunks将每个依赖包单独打包，在生产环境下配置，代码如下

*/

configureWebpack: (config) => {

if (process.env.NODE_ENV === 'production') {

// 为生产环境修改配置...

config.mode = 'production'

// 将每个依赖包打包成单独的js文件

let optimization = {

runtimeChunk: 'single',

splitChunks: {

chunks: 'all',

maxInitialRequests: Infinity,

minSize: 20000, // 依赖包超过20000bit将被单独打包 cacheGroups: {

vendor: {

test: /[\\/]node_modules[\\/]/,

name (module) {

// get the name. E.g. node_modules/packageName/not/this/part.js// or node_modules/packageName

const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]

// npm package names are URL-safe, but some servers don't like @ symbolsreturn `npm.${packageName.replace('@', '')}`

}

}

}

}

}

Object.assign(config, {

optimization

})

} else {

// 为开发环境修改配置...

config.mode = 'development'

}

Object.assign(config, {

// 开发生产共同配置 resolve: {

alias: {

'@': path.resolve(__dirname, './src'),

'@c': path.resolve(__dirname, './src/components'),

'@p': path.resolve(__dirname, './src/pages')

} // 别名配置 }

})

}

3.打包时去除打印信息（console）

3.1下载uglifyjs-webpack-plugin

npm install --save-dev uglifyjs-webpack-plugin

3.2在vue.config.js文件中引入，并在configureWebpack的optimization中添加如下代码

const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {

configureWebpack: (config) => {

if (process.env.NODE_ENV === 'production') {

// 为生产环境修改配置...

config.mode = 'production'

// 将每个依赖包打包成单独的js文件

let optimization = {

/*以下代码适用于uglifyjs-webpack-plugin 2.1.1及以前的版本*/

minimizer: [new UglifyPlugin({

uglifyOptions: {

compress: {

warnings: false,

drop_console: true, // console

drop_debugger: false,

pure_funcs: ['console.log'] // 移除console }

}

})]

/*新版uglifyjs-webpack-plugin需写成以下方式

minimizer: [new UglifyPlugin({

uglifyOptions: {

warnings: false,

compress: {

drop_console: true, // console

drop_debugger: false,

pure_funcs: ['console.log'] // 移除console

}

}

})]

*/

}

Object.assign(config, {

optimization

})

} else {

// 为开发环境修改配置...

config.mode = 'development'

}

}

}

//运行打包，你会发现我们在页面中写的那些打印日志的代码都消失了

4.开启gizp压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。

4.1下载 compression webpack plugin

npm install -D compression-webpack-plugin

4.2在package.json中添加openGzip字段，用作gizp开启开关

{

"name": "demo-cli3",

"version": "1.0.0",

"openGizp": false,

...

}

4.3在vue.config.js 中配置如下

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {

configureWebpack: (config) => {

if (process.env.NODE_ENV === 'production') {

// 为生产环境修改配置...

config.mode = 'production';

if(openGzip){

config.plugins = [

...config.plugins,

new CompressionPlugin({

test:/\.js$|\.html$|.\css/, //匹配文件名

threshold: 10240,//对超过10k的数据压缩

deleteOriginalAssets: false//不删除源文件 })

]

}

} else {

// 为开发环境修改配置...

config.mode = 'development';

}

}

}