当我们使用 Vue 开发单页应用时，要做的最后一步就是打包，这个过程中 Webpack 是至关重要的一环。Webapck 是一个打包工具，能够将多个 JavaScript 文件打包成一个或多个浏览器可识别的文件。但是，Webpack 的配置和使用却不是很简单。在这篇文章中，我们将讨论在 Vue SPA 应用中使用 Webpack 打包时需要注意的事项和常见的优化方法。
Webpack 配置
首先，我们需要了解 Webpack 的配置文件，即 webpack.config.js。这个文件告诉 Webpack 应该处理哪些文件，以及如何处理它们。在 Vue 应用中，通常会使用 vue-cli 脚手架工具来创建项目，vue-cli 在初始化项目时创建了一个 webpack.config.js 文件，我们可以在此基础上进行改进。
Entry 和 Output
在 webpack.config.js 中，我们需要指定应该从哪些文件开始打包。这些入口文件需要在 entry 中指定。为了展示一个简单的示例，我们假设我们有两个入口文件，分别是 main.js 和 vendor.js。其中 vendor.js 是提前提取出来的第三方库。
-- -------------------- ---- -------
-------------- - -
------ -
---- ----------------
------- -----------------
--
------- -
----- ----------------------- --------
--------- -----------------------
-
-output 属性用来定义 Webpack 打包之后的输出文件的位置和格式。在这个示例中，我们将打包后的文件放在 dist 目录下，并将输出文件命名为 [name].[chunkhash].js]。其中，[name] 指的是 entry 对象中的键值，[chunkhash] 可以防止浏览器缓存问题。
Loaders
Webpack 把一个文件作为模块处理，这意味着我们可以使用不同的 loaders 来处理不同的类型的文件。如果你的 Vue 应用使用了 CSS 或 Less，你需要使用 css-loader 和 less-loader。如果你的应用中有图片或字体等静态资源，你需要用到 file-loader 和 url-loader。
css-loader 和 style-loader
css-loader 负责解析 CSS 文件中的路径，然后将这些文件加入到 Webpack 的依赖列表中，而 style-loader 可以将 CSS 插入到 HTML 中的 style 标签里面。
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}Babel-loader
在使用 Vue.js 时，我们一般也需要使用 Babel 进行编译，以便我们可以在旧版本的浏览器中使用最新的 ECMAScript 特性。我们需要在 webpack.config.js 中加入 Babel-loader 的配置。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- ---------------
-------- --------------
-
-
-
-Plugins
Plugins 可以用来处理 loader 无法解决的其他问题。例如，在 Vue.js 应用中，我们可以使用 vue-loader 插件来解析 .vue 文件。
-- -------------------- ---- -------
----- --------------- - --------------------------------
-------------- - -
------- -
------ -
-
----- ---------
------- ------------
-
-
--
-------- -
--- -----------------
-
-Source Map
在开发调试阶段，source map 是非常有用的工具。source map 可以将编译后的代码映射回原始的代码，从而帮助开发者排查错误。
module.exports = {
devtool: 'source-map'
}优化打包速度
使用 Happypack
使用 Happypack 插件可以加速 Webpack 打包速度。Happypack 可以将 Webpack 中的模块解析和加载交给多个子进程处理，加快编译速度。
-- -------------------- ---- -------
----- --------- - --------------------
-------------- - -
------ -
-
----- ----------
---- ------------------------
-
--
-------- -
--- -----------
--- -----
-------- --
-------- ----------------
--
-
-使用 Tree-Shaking
Tree-Shaking 是指只打包应用程序中用到的代码，而不是所有代码。这个技术可以显著减少打包后 JavaScript 文件的大小。
在 Vue.js 应用中，我们可以使用 babel-plugin-transform-imports 插件将 Vue 组件从原来的 import Vue from 'vue' 改为 import { component } from 'vue' 的方式引用组件。这可以让 Webpack 在打包时只打包用到的组件，而不是所有的组件。
使用 CDN
Vue.js 和其他第三方库可以从 CDN 中加载，这样可以让用户更快地下载你的应用程序文件。只需要将 <script> 标签的 src 属性设置为 CDN 地址即可。
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
压缩代码
使用 Webpack 打包时，我们可以使用 UglifyJS Plugin 或 TerserPlugin 来压缩 JavaScript 代码。
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin({})],
}
}结论
在 Vue 应用中使用 Webpack 打包可能很耗费时间，但是通过正确的配置和优化技术，可以大大减少打包时间并提高应用程序的性能。本文介绍了一些常见的 Webpack 配置和优化方法，希望可以帮助您更好地理解 Webpack 并提高 Vue 应用的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ebd75eedcc8a97c8aa49a