前端开发中，我们常常需要使用许多新的 ES6 / ES7 语法和 API，然而它们并不被所有浏览器兼容。这时候，我们可以使用 Babel 来将新语法转换为 ES5 语法，从而实现浏览器兼容。而将所有的项目文件打包成最终的 JavaScript 文件，则可以通过使用 Webpack 工具实现。这两个工具的完美结合，让前端开发更加便捷，本文将对这两个工具的结合使用进行详解。
什么是 Webpack？
Webpack 是一个通过分析项目代码的模块系统，分析模块之间的依赖关系并生成最终的静态资产（bundle）的模块打包工具。Webpack 具有很多的优点，比如可以减少 HTTP 请求次数、支持各种模块化规范、支持开发和生产环境的不同打包策略等。
什么是 Babel？
Babel 是一个由 JavaScript 生成 JavaScript 的编译器，可以将新的 ES6 / ES7 语法转换为 ES5 语法。Babel 具有很多的优点，比如可以让开发者写最新的 ES6 / ES7 代码，而不必担心浏览器兼容性问题。
webpack + babel 结合使用
一般来说，Webpack 需要从一个入口点开始，然后根据代码之间的依赖关系进行代码分块，最终生成 bundle。为了让 Babel 将新的 ES6 / ES7 语法转换为 ES5 语法，我们需要在 Webpack 中进行一些配置。
首先需要安装一些必要的 Loader 和插件：
npm install --save-dev babel-loader @babel/core @babel/preset-env webpack
@babel/core：Babel 核心库。@babel/preset-env：一个 Babel 插件，可以根据当前环境自动转换 JavaScript 语法。babel-loader：Webpack 所需的 Babel Loader。webpack：Webpack 工具。
接着，我们需要在 webpack.config.js 配置文件中对 Babel 进行配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- -------- -- - --- ------
-------- ---------------------------------- -- --------
---- -
------- --------------- -- -- ------------
-------- -
-------- --------------------- -- --
-
-
-
-
-
--在这个例子中，Webpack 将针对 .js 文件，排除不必要的文件，使用 babel-loader 进行 Loader，并且使用 @babel/preset-env 进行编译。我们还可以在 @babel/preset-env 中添加一些额外的参数来进行更细粒度的控制。假设我们希望支持 IE 11，可以使用以下的配置：
-- -------------------- ---- -------
-------- -
-------- -
-
--------------------
-
-------- -
--- ----
-
-
-
-
-示例代码
看到这里，你应该已经清楚了 Webpack 和 Babel 的结合使用方法。为了更好地了解实际应用，我们可以看一个简单的示例代码：
假设我们有以下两个文件：
message.js
export default "Hello world";
index.js
import message from './message.js'; document.body.textContent = message;
在执行 webpack 命令打包的同时，我们还需要对 .babelrc 文件进行配置：
{
"presets": ["@babel/preset-env"]
}最终，我们可以得到下面这个文件：
-- -------------------- ---- ------- -------- --- -- - -- ---------------- -------- ---- ------------------- - -- -- - --- -- - -- ------------------------- ---- ------------ ---- --------------------- --- --------- ------- -- --- ------ ------- ---------- --- ----- ----- -------- ----- ---- -------- --------- -- --- ------ ---------- ---- --------- --- ----- ----- -------- ----- ---- -------- --------- -- --- ----- ------- ---- --------- --- ----- ----- -------- ----- ---- -------- --------- -- --- ------- ------------- -- ----- -------------------------- -------------------- -------------------- -- - -- ------- ------ -- ------------------------------------------ - -- ------- ------ -- ---------- -- -- --- ------- -- -------- -- ------- ------ -- --- ----- ------- - ------ ------- --- -- --- -------- -------------------------- --- --------------------- -------- - -------- ---- -
可以看到，在 Webpack 和 Babel 的帮助下，我们仅需要两个小文件就可以生成一个 JavaScript 资产文件。在这个实例中我们使用了两个很重要的 Webpack 插件（分别是file-loader 和 style-loader) ，可以帮助我们处理和构建 .js 文件。
总结
Webpack 和 Babel 都是目前前端开发必备的工具，非常有助于开发者的开发和生产工作。结合使用可以让我们实现更高级的功能和更好的兼容性，令我们的项目变得更加合理和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64716b6f968c7c53b0f48f9e