共计 12581 个字符，预计需要花费 32 分钟才能阅读完成。
vue-cli3 搭建残缺我的项目之 webpack 配置
后面篇介绍了我的项目初始化，上面就要开始对我的项目 webpack 进行配置，因为 vue-cli3 将 webpack 的根底配置全副内嵌了，这就导致咱们初始化我的项目实现之后发现原先的 webpack 的 config 配置全副都隐没不见了，那该怎么办呢？别慌，vue-cli3 早就思考到了这一点，它预留了一个 vue.config.js 的 js 文件供咱们对 webpack 进行自定义配置。
vue.config.js 官网配置指南
一、在我的项目根目录下新建 vue.config.js 文件与 package.json 同级
上面是我的 vue.config.js 文件, 外面有具体的正文，这里不再赘述
`const path = require('path')
module.exports = {
publicPath: './', // 根本门路
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: false, // 开启 CSS source maps?
loaderOptions: {css: {}, // 这里的选项会传递给 css-loader
postcss: {} // 这里的选项会传递给 postcss-loader}, // css 预设器配置项 详见 https://cli.vuejs.org/zh/config/#css-loaderoptions
modules: false // 启用 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: 8022, // 端口
https: false, // 启用 https
overlay: {
warnings: true,
errors: true
}, // 谬误、正告在页面弹出
proxy: {
'/api': {
target: 'http://www.baidu.com/api',
changeOrigin: true, // 容许 websockets 跨域
// ws: true,
pathRewrite: {'^/api': ''}
}
} // 代理转发配置，用于调试环境
},
// 第三方插件配置
pluginOptions: {}}`
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
* 21
* 22
* 23
* 24
* 25
* 26
* 27
* 28
* 29
* 30
* 31
* 32
* 33
* 34
* 35
* 36
* 37
* 38
* 39
* 40
* 41
* 42
* 43
* 44
* 45
* 46
* 47
* 48
* 49
* 50
* 51
* 52
* 53
* 54
* 55
* 56
* 57
* 58
* 59
* 60
* 61
* 62
* 63
* 64
* 65
* 66
* 67
二、优化打包 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 @ symbols
return `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')
} // 别名配置
}
})
}``
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
* 21
* 22
* 23
* 24
* 25
* 26
* 27
* 28
* 29
* 30
* 31
* 32
* 33
* 34
* 35
* 36
* 37
* 38
* 39
* 40
* 41
* 42
* 43
计划二、利用 DllPlugin 和 DllReferencePlugin 将依赖包打包成内部文件在 index 中引入
-
在 package.json 中新建 library, 用于存储行将要打包的依赖包名和打包后的文件名
`{ ... "name": "demo-cli3", "version": "1.0.0", "version_lib": "1.0.0", "library": { "lib_v1_0": ["jquery/dist/jquery.min.js"], "vueBucket_v1_2": [ "vue-router", "vuex" ] }, ... }` -
创立 webpack.dll.config.js 文件，代码如下
``const path = require('path') const webpack = require('webpack') const {library} = require('./package.json') // const assetsSubDirectory = process.env.NODE_ENV === 'production' // ? build.assetsSubDirectory : dev.assetsSubDirectory let {version_lib} = require('./package.json'); version_lib = version_lib.replace(/./g,'_'); module.exports = { entry: library, output: {path: path.resolve(__dirname, './libs/package/js'), filename: `[name].${version_lib}.dll.js`, library: '[name]_library' }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, optimization:{ minimizer:[ new UglifyPlugin({ uglifyOptions: { warnings: false, compress: { drop_console: true, // console drop_debugger: false, pure_funcs: ['console.log'] // 移除 console } } }) ] }, plugins: [new webpack.optimize.ModuleConcatenationPlugin(), new webpack.ContextReplacementPlugin(/moment[/]locale$/, /zh-cn|en-gb/), new webpack.DllPlugin({path: path.resolve(__dirname, './libs/package/json', '[name].manifest.json'), name: '[name]_library', context: process.cwd()}) ] }`` -
在 vue.config.js 中配置 DllReferencePlugin
``let {version, version_lib , openGzip,library} = require('./package.json'); ... module.exports = {configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') { // 为生产环境批改配置... config.mode = 'production'; ... Object.assign(config, { ... plugins:[ ...config.plugins, ...Object.keys(library).map(name => { return new webpack.DllReferencePlugin({context: process.cwd(), manifest: require(`./libs/package/json/${name}.manifest.json`), }) }) ] }); ... } else { // 为开发环境批改配置... config.mode = 'development'; } ... }, } ...`` -
将打包好的 js 主动增加进 index.html 中
下载 add-asset-html-webpack-plugin
`npm install --save-dev add-asset-html-webpack-plugin` * 1在 vue.config.js 中配置 add-asset-html-webpack-plugin
``const webpack = require('webpack'); const path = require('path'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); ... module.exports = { ... configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') { // 为生产环境批改配置... config.mode = 'production'; ... Object.assign(config, { ... plugins:[ ... new AddAssetHtmlPlugin(Object.keys(library).map(name => { return {filepath: require.resolve(path.resolve(`libs/package/js/${name}.${version_lib}.dll.js`)), outputPath: 'static/lib/js', publicPath:'./static/lib/js', includeSourcemap: false } })), ] }); ... } else { // 为开发环境批改配置... config.mode = 'development'; } ... }, ... }``注：计划一、计划二可同时应用，独自应用计划二不须要将 vue 也增加进打包序列，那样会反复打包（在 chunk-venders.js 中始终会将 vue 打包进去），若同时应用则不会呈现该状况。
至此，打包优化完结，运行打包，你会发现原先的 vender 文件没有了，同时多了好几个依赖的 js 文件（计划一）
三、打包时去除打印信息（console）
-
下载 uglifyjs-webpack-plugin
uglifyjs-webpack-plugin 中文文档`npm install --save-dev uglifyjs-webpack-plugin` -
在 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 = { ... minimizer: [new UglifyPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true, // console drop_debugger: false, pure_funcs: ['console.log'] // 移除 console } } })] } Object.assign(config, {optimization}) } else { // 为开发环境批改配置... config.mode = 'development' } ... }, ... }` -
运行打包，你会发现咱们在页面中写的那些打印日志的代码都隐没了
注：以上代码实用于 uglifyjs-webpack-plugin 2.1.1 及以前的版本，新版 uglifyjs-webpack-plugin 需写成以下形式`... minimizer: [new UglifyPlugin({ uglifyOptions: { warnings: false, compress: { drop_console: true, // console drop_debugger: false, pure_funcs: ['console.log'] // 移除 console } } })] ...`
四、配置全局 jQuery
-
下载 jQuery npm 包
`npm install --save-dev jquery` -
设置‘jquery$’别名, 代码如下：
`... chainWebpack: (config) => { // 修复 HMR config.resolve.symlinks(true); // 别名配置 console.log("__dirname",__dirname); config.resolve.alias .set('@', path.resolve(__dirname, './src')) .set('@a', path.resolve(__dirname, './src/assets')) .set('@c', path.resolve(__dirname, './src/components')) .set('@p', path.resolve(__dirname, './src/pages')) .set('jquery$', 'jquery/dist/jquery.min.js'); }, ...` -
应用 ProvidePlugin 插件为 jQuery 增加全局变量
`... configureWebpack: (config) => { ... Object.assign(config, { // 开发生产独特配置 // externals: { // 'vue': 'Vue', // 'element-ui': 'ELEMENT', // 'vue-router': 'VueRouter', // 'vuex': 'Vuex' // } // 避免将某些 import 的包 (package) 打包到 bundle 中，而是在运行时 (runtime) 再去从内部获取这些扩大依赖(用于 csdn 引入) plugins:[ ...config.plugins, new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery", "windows.jQuery":"jquery" }) ] }); }, ...` - 至此能够在全局应用 jquery 了
五、开启 gizp 压缩
gizp 压缩是一种 http 申请优化形式，通过缩小文件体积来进步加载速度。html、js、css 文件甚至 json 数据都能够用它压缩，能够减小 60% 以上的体积。webpack 在打包时能够借助 compression webpack plugin 实现 gzip 压缩。
-
下载 compression webpack plugin
`npm install -D compression-webpack-plugin` - 在 package.json 中增加 openGzip 字段，用作 gizp 开启开关
`{
"name": "demo-cli3",
"version": "1.0.0",
"openGzip": false,
...
}` -
vue.config.js 中配置如下
`const CompressionPlugin = require("compression-webpack-plugin"); ... configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') { // 为生产环境批改配置... config.mode = 'production'; // 将每个依赖包打包成独自的 js 文件 ... if(openGzip){ config.plugins = [ ...config.plugins, new CompressionPlugin({ test:/.js$|.html$|.css/, // 匹配文件名 threshold: 10240,// 对超过 10k 的数据压缩 deleteOriginalAssets: false // 不删除源文件 }) ] } } else { // 为开发环境批改配置... config.mode = 'development'; } ... }, ...` - 注：生成的压缩文件以.gz 为后缀，个别浏览器都已反对.gz 的资源文件，在 http 申请的 Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz 文件，还须要对服务器进行配置，依据 Request Headers 的 Accept-Encoding 标签进行甄别，如果反对 gzip 就返回.gz 文件。
六、将版本号增加进打包的 js 名中
-
vue.config.js 中配置如下
``... let {version , openGzip} = require('./package.json'); version = version.replace(/./g,'_'); ... module.exports = { assetsDir: "static", configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') { // 为生产环境批改配置... config.mode = 'production'; ... Object.assign(config, { output:{ ...config.output, filename: `static/js/[name].[chunkhash].${version}.js`, chunkFilename: `static/js/[name].[chunkhash].${version}.js` }, ... }); ... } else { // 为开发环境批改配置... config.mode = 'development'; } ... }, } ...``
残缺代码如下：
``const webpack = require('webpack');
const path = require('path');
// const UglifyPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
let {version, version_lib , openGzip,library} = require('./package.json');
version = version.replace(/./g,'_');
version_lib = version_lib.replace(/./g,'_');
module.exports = {
publicPath: './', // 根本门路
outputDir: 'dist', // 输入文件目录
assetsDir: "static",
lintOnSave: false, // eslint-loader 是否在保留的时候查看
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// webpack 配置
chainWebpack: (config) => {
// 修复 HMR
config.resolve.symlinks(true);
// 别名配置
config.resolve.alias
.set('@', path.resolve(__dirname, './src'))
.set('@a', path.resolve(__dirname, './src/assets'))
.set('@c', path.resolve(__dirname, './src/components'))
.set('@p', path.resolve(__dirname, './src/pages'))
.set('jquery$', 'jquery/dist/jquery.min.js');
},
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 @ symbols
return `npm.${packageName.replace('@', '')}`;
}
}
}
},
minimizer: [
new UglifyPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_console: true, // console
drop_debugger: false,
pure_funcs: ['console.log'] // 移除 console
}
}
})
]
};*/
Object.assign(config, {
output:{
...config.output,
filename: `static/js/[name].[chunkhash].${version}.js`,
chunkFilename: `static/js/[name].[chunkhash].${version}.js`
},
// optimization,
plugins:[
...config.plugins,
...Object.keys(library).map(name => {
return new webpack.DllReferencePlugin({context: process.cwd(),
manifest: require(`./libs/package/json/${name}.manifest.json`),
})
}),
new AddAssetHtmlPlugin(Object.keys(library).map(name => {
return {filepath: require.resolve(path.resolve(`libs/package/js/${name}.${version_lib}.dll.js`)),
outputPath: 'static/lib/js',
publicPath:'./static/lib/js',
includeSourcemap: false
}
})),
]
});
if(openGzip){
config.plugins = [
...config.plugins,
new CompressionPlugin({
test:/.js$|.html$|.css/, // 匹配文件名
threshold: 10240,// 对超过 10k 的数据压缩
deleteOriginalAssets: false // 不删除源文件
})
]
}
} else {
// 为开发环境批改配置...
config.mode = 'development';
}
Object.assign(config, {
// 开发生产独特配置
// externals: {
// 'vue': 'Vue',
// 'element-ui': 'ELEMENT',
// 'vue-router': 'VueRouter',
// 'vuex': 'Vuex'
// } // 避免将某些 import 的包 (package) 打包到 bundle 中，而是在运行时 (runtime) 再去从内部获取这些扩大依赖(用于 csdn 引入)
plugins:[
...config.plugins,
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
"windows.jQuery":"jquery"
})
]
});
},
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// css 相干配置
css: {
extract: true, // 是否应用 css 拆散插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {css: {}, // 这里的选项会传递给 css-loader
postcss: {} // 这里的选项会传递给 postcss-loader}, // css 预设器配置项
modules: false // 启用 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: 8022, // 端口
https: false, // 启用 https
overlay: {
warnings: true,
errors: true
}, // 谬误、正告在页面弹出
proxy: {
'/api': {target: `${process.env.VUE_APP_BASE_API}/api`,
changeOrigin: true, // 容许 websockets 跨域
// ws: true,
pathRewrite: {'^/api': ''}
}
} // 代理转发配置，用于调试环境
}, // 第三方插件配置
pluginOptions: {}};``
pa
注：如需其余的配置可在上方官网配置指南中查找相干配置
正文完