在上一篇教程中，我们介绍了如何使用 Vue-cli 3.0 初始化项目并配置基础功能，这一篇教程将介绍如何使用 Webpack 4.0 进行更加高级和定制化的配置。我们将逐步实现以下功能：
- 使用环境变量进行不同环境的打包
- 使用插件压缩代码
- 实现代码分割和懒加载
- 实现 polyfill 和兼容性处理
使用环境变量进行不同环境的打包
在开发过程中，我们通常需要在不同环境下进行打包，比如开发环境、测试环境和生产环境。使用环境变量可以方便地进行不同环境的配置。
首先，我们需要安装 cross-env 模块，该模块可以操作跨平台的环境变量，可以在命令行中定义环境变量。使用以下命令进行安装：
npm install cross-env --save-dev
然后，我们在 package.json 文件中定义打包命令，例如将开发环境和生产环境分别打包到 dist/dev 和 dist/prod 目录下。
"scripts": {
"dev": "cross-env NODE_ENV=development vue-cli-service build --mode development --dest ./dist/dev",
"prod": "cross-env NODE_ENV=production vue-cli-service build --dest ./dist/prod"
}上述命令中定义了两个脚本，一个是 dev，用于开发环境打包；另一个是 prod，用于生产环境打包。使用 NODE_ENV 定义环境变量。使用 --mode development 表示开发环境打包，而不使用不同的判断条件；--dest 表示打包输出目录。
使用插件压缩代码
在实际项目中，代码文件可能会很大。使用插件压缩代码可以减小文件大小，加快网页加载速度。Vue-cli 3.0 默认使用了 UglifyJS 插件进行代码的压缩。
如果需要自定义插件，可以在 vue.config.js 文件中添加相应的插件。例如，我们使用 uglifyjs-webpack-plugin 插件对 JS 文件进行压缩。使用以下命令进行安装：
npm install uglifyjs-webpack-plugin --save-dev
在 vue.config.js 中添加如下配置：
// www.javascriptcn.com code example
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
}
}
})
]
}
}其中，configureWebpack 定义了 Webpack 配置，plugins 定义了插件列表。new UglifyJsPlugin() 创建了一个新的插件实例，并且定义了 uglifyOptions 参数。其中，compress 中的三个参数可以去除代码中的警告、控制台调试信息和调试器相关信息。
实现代码分割和懒加载
代码分割和懒加载可以帮助我们减小文件的大小，加快网页加载速度。我们可以将业务代码和第三方库代码或公共代码分别打包，这样可以对不同的代码块进行懒加载。
Vue-cli 3.0 已经默认开启了代码分割和懒加载，不需要额外的配置。
在开发过程中，我们可以使用 @babel/plugin-syntax-dynamic-import 插件实现代码块的懒加载。使用以下命令进行安装：
npm install @babel/plugin-syntax-dynamic-import --save-dev
然后在 .babelrc 文件中添加插件的配置项：
"plugins": [ "@babel/plugin-syntax-dynamic-import" ]
实现 polyfill 和兼容性处理
在实际应用中，我们需要使用 ES6 或以上的语法，但是这些语法在一些旧的浏览器中可能不能兼容，需要做一些兼容性处理。可以使用 @babel/polyfill 模块和 babel-preset-env 插件实现对 ES6 的支持。
首先，使用以下命令进行安装：
npm install @babel/polyfill babel-preset-env --save-dev
然后，在 .babelrc 文件中添加 babel-preset-env 插件的配置项，并且在入口文件中导入 @babel/polyfill 模块。
// www.javascriptcn.com code example
{
"presets": [
[
"env",
{
"useBuiltIns": "entry"
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}在入口文件中导入：
import '@babel/polyfill'
这样就可以对 ES6 进行支持，并且可以对低版本浏览器进行兼容性处理。
本篇教程介绍了如何使用 Webpack 4.0 进行高级配置，包括使用环境变量进行不同环境的打包、使用插件压缩代码、实现代码分割和懒加载、实现 polyfill 和兼容性处理等。这些功能在实际开发中非常有用，可以提高代码的可维护性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c848b7e46428fe9eea1b9d