前端开发中，打包工具是一个非常重要的环节，可以将多个 JS/CSS 文件合并和压缩成一个或少量的文件，从而提高页面加载速度，减小网络资源的请求数量。目前，市面上有很多非常好用的打包工具，比如：Webpack、Grunt、Gulp、Rollup 等。但是，Webpack 作为一个具有高度可定制性和扩展性的打包工具，占据了越来越多的市场份额。
为什么选择Webpack
与其它打包工具相比，Webpack 具有以下特点：
- 更强大的模块化。Webpack允许你引入非常灵活的模块系统，允许你将所有的资源都视为模块，并允许你更深入地控制模块依赖图，这使得构建大型应用程序更加容易。
- 更全面的生态系统。比如，通过精心设计的Webpack插件，您可以轻松地添加和重复使用各种应用程序元素，而不会影响您的构建流程。
- 更高效的构建。Webpack 在构建过程中使用了缓存技术，可以防止重复打包已经打包完成的模块，显著提高打包速度。
- 支持任何语言。Webpack 可以处理 JavaScript、CSS、SASS、LESS、TypeScript、React、Vue 等多种语言，且支持插件扩展，所以我们可以更加灵活地定制自己的构建流程。
基本配置及使用
下面，我们将讲解如何使用 Webpack 打包工具。
安装Webpack
全局安装webpack：
npm install webpack -g
或局部安装：
npm install webpack -D
然后我们需要安装节点 http-server ，方便我们开启本地服务器。
npm install http-server -D
创建项目结构
在项目根目录下，我们需要创建以下文件夹和文件：
dist // Webpack 打包后的静态资源文件夹 src // 存放源码文件 index.html // 主页面 webpack.config.js // Webpack 配置文件
配置webpack.config.js
在webpack.config.js中定义如何打包和转换应用程序的代码，然后输出到 dist 目录：
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
}
};上述配置很简单，但就足够为我们的代码创建一个工作的 Webpack 构建 。
创建主页面
在 index.html 文件中添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
---- ----------------
------- -------------------------
-------
-------上述代码将我们的JS代码加载到页面中。
创建JS源码
在 src 目录下新建以下文件：
src |- index.js |- message.js
并在 index.js 中引用 message.js 文件：
import { message } from './message';
document.write(message);并在 message.js 中设置 message 字符串：
export const message = 'Hello, Webpack';
这将创建一个非常简单的程序，用于将“ Hello，Webpack”写入首页。
运行Webpack
接下来，在命令行中输入以下命令运行Webpack：
webpack
或者，使用以下命令打包并启动本地服务器：
npm run build && http-server dist
在浏览器中打开 Webpack 生成的 index.html 文件，你应该看到“ Hello，Webpack”呈现在页面上。
常用插件
Webpack 还提供了很多实用的插件，用于完成不同的任务，如代码优化、模块管理、文件压缩等。
####uglifyjs-webpack-plugin
用于压缩 JS 文件，可以简单的添加到 Webpack 插件中以实现压缩：
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJSPlugin()
]
};####ExtractTextPlugin
将 CSS 文件拆分，进一步优化打包。如果你的页面中带有大量的样式，你可以使用 ExtractTextPlugin 插件将 CSS 单独提取出来，这样可以更快地加载页面：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
-
-
--
-------- -
--- ------------------------------
-
--####html-webpack-plugin
插入生成的 JS 代码包含的文件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
------ -------- ------
--------- -------------
--------- -------------
------- -------
--
-
--上述代码将把打包后的 JS 文件注入到 index.html 文件中，包含所有引用的文件。
总结
这里仅仅介绍了Webpack的入门和基本的用法，实际上Webpack具备非常强大的定制化能力，尤其是对大型应用程序打包、优化等方面有很好的支持，希望读者可以在实践中深入了解Webpack，进一步发挥优化功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bf56748841e98948b9333