Webpack 的一些常见小技巧
Webpack 是一个常用的前端构建工具，它可以帮助我们打包 JavaScript、CSS、图片等文件。它也提供了很多有用的功能，如代码分割、热更新等。在这篇文章中，我们将分享一些常见的小技巧，希望能对你在使用 Webpack 时有所帮助。
- 使用 alias 快速引用模块
在使用 Webpack 时，我们经常需要引用一些模块，但有些模块的路径比较长，这会让我们的代码显得冗长。我们可以使用 alias 来快速引用这些模块。
在 webpack.config.js 中，我们可以设置 alias 属性，如下所示：
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'vue$': 'vue/dist/vue.esm.js' // 引入不同版本的 vue
}
}
};然后在代码中，我们就可以使用 alias 来引用模块了：
import Vue from 'vue'; import App from '@/components/App';
通过使用 alias，我们可以让代码更加简洁，同时易于维护。
- 使用 Externals 加载外部库
在使用 Webpack 时，有些库可能已经被打包成一个独立的文件，我们只需要在页面上引入该文件即可。这种情况下，我们可以使用 Externals 来加载这些外部的库，这样就不需要将它们打包到我们的代码中。
在 webpack.config.js 中，我们可以设置 Externals，如下所示：
module.exports = {
externals: {
'jquery': 'jQuery'
}
};然后，我们可以在代码中使用该外部库：
import $ from 'jquery';
这样就会从 cdn 上加载该外部库。
- 使用 babel-loader 编译 ES6
ES6 提供了很多有用的功能，但有些浏览器并不支持。为了让这些功能在较低版本的浏览器上正常运行，我们需要使用 babel-loader 对代码进行编译。
在 webpack.config.js 中，我们可以配置 babel-loader，如下所示：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--这样就可以使用 ES6 的语法了。
- 使用 splitChunksPlugin 进行代码分割
在一个大型的项目中，所有的代码都打包成一个文件可能会导致页面加载速度变慢。为了避免这种情况，我们需要将代码分割成多个文件。
在 webpack.config.js 中，我们可以配置 splitChunksPlugin，如下所示：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
};这样就会将公共的代码分割成一个共享的文件。这样优化后的代码更容易维护，并且可以提高页面加载速度。
- 使用 Hot Module Replacement 进行热更新
在开发过程中，我们经常需要修改代码，但每次都要重新启动服务会很浪费时间。为了解决这个问题，我们可以使用 Hot Module Replacement 进行热更新。
在 webpack.config.js 中，我们可以配置 Hot Module Replacement，如下所示：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
---------- -
---- ----
--
-------- -
--- ------------------------------------
-
--然后，在我们的代码中，我们需要添加如下代码：
if (module.hot) {
module.hot.accept('./app.js', () => {
// do something...
});
}这样，在修改代码后，页面会自动刷新，从而提高开发效率。
总结
在这篇文章中，我们分享了一些常见的小技巧，包括使用 alias 快速引用模块，使用 Externals 加载外部库，使用 babel-loader 编译 ES6，使用 splitChunksPlugin 进行代码分割，以及使用 Hot Module Replacement 进行热更新。这些技巧可以帮助我们更好地使用 Webpack，从而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648dc02448841e9894c1dae5