在当今大数据的时代，网站的规模和复杂度越来越大，前端开发者需要协调的资源也在增加。Webpack 能够优化这个问题，它可以将各种资源，如 js 文件、css 文件、图片、字体等，变成在浏览器中可以运行的 bundle。在本文中，我们将介绍 Webpack 的基础知识、常用配置、插件和优化方法，最终帮助你从入门到精通 Webpack。
基础知识
安装 Webpack
Webpack 是一个基于 Node.js 实现的打包工具，要使用它需要在本地安装 Node.js。安装完成后，使用以下命令可以安装 Webpack：
npm install webpack webpack-cli --save-dev
webpack-cli 是可选的，但是推荐安装。它可以提供一些便捷的命令行功能。
资源加载
Webpack 可以将各种资源打包成一个或多个 bundle，但是为了实现这个目的，我们需要使用不同的 loaders 去处理不同的资源类型。比如，对于 css 文件可以使用 css-loader 和 style-loader，对于图片可以使用 file-loader 或 url-loader。当然，这只是示例，Webpack 支持的资源类型更多。
loader 配置的写法是：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- ---------------- -------------
--
-
----- --------------------------------
---- -
-
------- -------------
--
--
--
--
--
--上面的代码中，我们配置了两种 loader：
css-loader能够解析 css 文件，并且允许在 js 中import这些文件；style-loader将解析后的 css 挂载到 html 中的<style>标签上。url-loader将图片等资源都打包成 base64 图片格式，也可以配置成生成静态图片文件。当图片较小，建议使用url-loader；当图片较大时，可以考虑使用file-loader。
插件
除了 loaders，Webpack 还拥有强大的插件机制，我们可以使用插件进行各种资源的优化。例如，clean-webpack-plugin 可以在每次编译前删除旧的文件；html-webpack-plugin 可以根据模板页面自动生成 HTML 代码；extract-text-webpack-plugin 可以将 CSS 文件单独打包等等。
插件的使用方式是将插件的实例当做参数传递给 Webpack：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------------------ - --------------------------------
-------------- - -
-------- -
--- ---------------------
--- -------------------
------ --- ------- -----
--------- -------------
--------- ----------------------
---
--
--常用配置
Webpack 的配置文件是 webpack.config.js，我们可以在这个文件中定义入口、输出、loader、插件等。常用配置包括以下几个。
入口
入口是 Webpack 开始处理的起点。可以是一个或多个 js 文件：
-- -------------------- ---- -------
-------------- - -
------ -----------------
--
-------------- - -
------ -
----- -----------------
------- -----------
--
--输出
输出通常定义了 bundle 生成后的位置和名称。可以设置路径、文件名和 chunk 名称：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------- -
----- ----------------------- --------
--------- ------------
-------------- -------------------
--
--模式
在 Webpack 中可以设置不同的模式，例如 development、production 或 none。不同的模式会影响 Webpack 对代码的处理。例如，在 production 模式下，Webapck 会对代码压缩和混淆，从而优化代码。
module.exports = {
mode: 'production',
};服务器
Webpack 可以启动一个本地服务器去访问 webpack 打包后的文件。
npm install webpack-dev-server --save-dev
module.exports = {
devServer: {
contentBase: './dist',
port: 8080,
}
};性能优化
多入口文件
Webpack 可以将多个入口文件分别打包成一个 bundle，这样可以避免将所有代码打包在一个文件中。例如：
-- -------------------- ---- -------
-------------- - -
------ -
----- ----------------
------ -----------------
-------- ------------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
--代码分离
通过代码分离，可以将打包后的代码拆分成多个小块，可以加快加载时间，减少初次加载的大小。
Webpack 有三种代码分离方式：
- 入口起点：使用
entry配置手动分离代码； - 防止重复：使用
SplitChunksPlugin去重和分离 chunk； - 动态导入：通过模块化的方式自动将某些代码拆分成 chunk。
懒加载
懒加载可以避免将所有代码在页面加载时一次性下载，根据需要用到哪个模块时再进行下载和加载。
import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
// ...
});缓存
Webpack 支持使用 hash 值对打包的文件进行标记，根据文件内容的变动重新生成新的 hash 值。这也意味着只有代码有变更时，才会重新生成缓存，这可以大大加快 webpack 的编译效率。
module.exports = {
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist'),
},
};实战
在实战部分，我们将演示如何使用 Webpack 打包 Vue.js 的项目代码。
安装 Vue.js
在打包 Vue.js 页面前需要先安装 Vue.js。使用以下命令可以在本地安装 Vue.js：
npm install vue --save-dev
安装 Webpack 相关依赖
通过以下命令可以安装和 Webpack 相关的依赖：
npm install webpack vue-loader vue-template-compiler css-loader file-loader html-webpack-plugin mini-css-extract-plugin webpack-dev-server webpack-cli --save-dev
安装使用 Element UI
Element 是一套为开发者、设计师和产品经理准备的基于 Vue.js 的组件库。
可以通过以下命令安装 Element：
npm install element-ui --save-dev
配置 Webpack
在根目录新建一个名为 webpack.config.js 的文件，编写以下配置代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
----- --------------
------ ----------------
------- -
----- ----------------------- --------
--------- ------------------------
--
------- -
------ -
-
----- ---------
---- -------------
--
-
----- ---------
---- -
-
------- ----------------------------
--
-------------
--
--
-
----- --------
-------- ---------------
------- ---------------
--
-
----- --------------------------------
---- -
-
------- -------------
-------- -
------ ------
--
--
--
--
-
----- ---------------------------------
---- -
-
------- --------------
-------- -
------ ------
--
--
--
--
--
--
-------- -
--- ---------------------
--- -------------------
------ --- -----
--------- -------------------
---
--- ----------------------
--------- -------------------------
---
--
--上述代码中使用了以下插件和 loader：
vue-loader，可以使用 vue 脚手架的单文件组件；css-loader和mini-css-extract-plugin，可以将 css 文件和 js 文件分离打包；babel-loader，可以使用 ES6 语法；url-loader和file-loader，可以在打包时处理图片、字体等资源。
配置 Vue.js 单文件组件
在 src 目录下，新建一个名为 App.vue 的文件，添加以下代码：
-- -------------------- ---- ------- ---------- ---------------- --------------- ----------- -------- ------ ------- - ----- ------ -- --------- ------ ------- -- --- ------- -- ------ -- ------- ---------------------------------------- --------
编写 main.js
在 src 目录下，新建一个名为 main.js 的文件，编写以下代码：
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App),
});编写 HTML 模板文件
在 src 目录下，新建一个名为 index.html 的模板文件，编写以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------- ------------------------------- ----------
-------
------
---- ---------------
------- -------- ----------------------------------------- --- ---------------
-------
-------编写 package.json
在 package.json 中添加一个 script 执行 Webpack：
-- -------------------- ---- -------
-
------- ---------------
---------- --------
---------- -
-------- ----------
------ --------------------
--
--------------- -
------------- ----------
------ ---------
--
------------------ -
-------------- -----------
-------------------- -----------
--------------- ---------
----------------------- ---------
------------- ---------
-------------- ---------
---------------------- ---------
-------------------------- ---------
------------- ---------
------------- ----------
------------------------ ----------
---------- ----------
-------------- ---------
--------------------- ---------
-
-最后运行 npm run start，就可以启动 Webpack，打开 http://localhost:8080 即可看到 Hello World。
结论
Webpack 是一个强大的前端工具，从解析模块到资源打包，再到插件扩展，都可以帮我们完成前端项目打包的过程。在本文中，我们探索了 Webpack 的基础知识、加载器和插件，也演示了如何使用 Webpack 打包 Vue.js 项目代码。希望本文可以帮助你更好的掌握 Webpack。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67036e9fd91dce0dc84b7d8d