带你了解webpack的使用

本文是一篇webpack的入门文章，简单的介绍webpack的使用，大部分来自官网指导手册：https://www.webpackjs.com/。如果想进一步学习webpack的使用，请移步官网。

一 webpack基本安装

webpack is a module bundler.(模块打包工具)
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语⾔言（scss，typescript等），并将其打包为合适的格式以供浏览器使用。

1.1 准备工作

在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

1.2 本地安装

最新的webpack版本是：webpack v5.0.0。

首先我们创建一个目录，初始化 npm：

mkdir webpack-example
cd webpack-example
npm init -y

然后在本地安装 webpack，要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果你使用 webpack 4+ 版本，你还需要安装 cli，webpack-cli 可以帮助我们在命令行里使用npx ,webpack等相关指令。

npm install --save-dev webpack-cli

当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

我们可以通过运行一下命令，检测webpack是否安装成功：

webpack -v      //command not found 默认在全局环境中查找
npx webpack -v  // npx帮助我们在项⽬目中的node_modules⾥查找webpack

1.3  全局安装(不推荐)

以下的 npm安装方式，将使 webpack 在全局环境下可用：

npm install -g webpack

不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

二  webpack的入口和出口

之前我们曾经说过webpack是一个打包工具，既然是打包工具，那它就应该有一个入口，当webpack处理应用程序时，就会从入口递归的构建一个依赖图，其中包含应用程序所需的每个模块，然后将所有这些木块打包成一个或多个bundle。

webpack支持高度可配置的，我们可以通过创建webpack.config.js文件，配置webpack的入口和出口。

2.1 入口

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理，最后输出到称之为 bundle的文件中。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。

接下来我们看一个 entry 配置的最简单例子：

webpack.config.js

module.exports = {
    entry: "./src/index.js",  //默认的⼊入⼝⽂件
};

2.2 出口

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

const path = require('path');

module.exports = {
    entry: "./src/index.js", 
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack 打包后的文件名称，以及文件生成到哪里。可能你想要了解在代码最上面导入的 path 模块是什么，它是一个 Node.js 核心模块，用于操作文件路径。

2.3 修改package.json

修改package.json scripts字段：有过vue react开发经验的同学习惯使用npm run来启动，我们也可以修改下，原理就是模块局部安装会在node_modules/.bin目录下创建一个软链接。

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build":"webpack"
  },

我们创建src/index.js文件：

function component(){
    let element = document.createElement('div');

    element.innerHTML = `<pre>这是一个webpack demo</pre>`;

    return element;
}

document.body.appendChild(component());

此时在命令行运行npm run build，就相当于直接运行webpack（或者npx webpack）命令，此时就会使用webpack进行打包，会在当前项目下生成一个dist文件夹：

由于webpack打包使用的默认配置文件名称为webpack.config.js，因此我们不用指定配置文件名称，但是我们可以通过--config指定其它的配置文件，比如：

npm run  build --config webpackconfig.js //指定webpack使用webpackconfig.js⽂文件来作为配置文件并执行

三 mode

webpack提供mode配置选项，告知 webpack 使用相应模式的内置优化.

module.exports = {
  mode: 'production'
};

或者从命令行参数中传递：

webpack --mode=production

mode支持以下字符串值：

• development：会将 process.env.NODE_ENV的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
• production：会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

如果没有设置,webpack会将mode的默认值设置为production。开发阶段的开启会有利于热更新的处理，识别哪个模块变化。生产阶段的开启会有帮助模块压缩，处理副作用等一些功能。

四 loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

在更高层面，在 webpack 的配置中 loader 有两个目标：

• test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
• use 属性，表示进行转换时，应该使用哪个 loader。

4.1 简单示例

例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

webpack.config.js

const path = require('path');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    module: {
        rules: [
            { test: /.css$/, use: 'css-loader' },
            { test: /.ts$/, use: 'ts-loader' }
        ]
    }
};

4.2 常见的loader

style-loader
css-loader
less-loader
sass-loader
ts-loader //将Ts转换成js
babel-loader//转换ES6、7等js新特性语法
file-loader//处理图片子图
eslint-loader
...

4.3 file-loader示例

我们具体介绍以下file-loader的使用，file-loader主要用于处理静态资源模块。

原理是把打包入口中识别出的资源模块，移动到输出目录，并且返回一个地址名称。

所以我们什么时候⽤用file-loader呢？
场景：就是当我们需要模块，仅仅是从源代码挪移到打包目录，就可以使用file-loader来处理，txt，svg，csv，excel，图片资源啦等等

npm install --save-dev file-loader

案例webpack.config.js：

const path = require('path');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    module: {
        rules: [
            { test: /.css$/, use: 'css-loader' },
            { test: /.ts$/, use: 'ts-loader' },
            {
                test: /.(png|jpe?g|gif)$/,
                //use使⽤用⼀一个loader可以⽤用对象，字符串串，两个loader需要⽤用数组
                use: {
                    loader: "file-loader",
                    // options额外的配置，⽐如资源名称
                    options: {
                        //生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名
                        name: "[hash].[ext]",
                        //打包后的存放位置
                        outputPath: "images/",
                    }
                }
            }
        ]
    }
};

修改src/index.js文件：

import image from './image.jpg';

function component(){
    let element = document.createElement('img');

    element.src = image;

    return element;
}

document.body.appendChild(component());

运行npm run build重新打包：

4.4 样式处理

css-loader 分析css模块之间的关系，并合成一个css。
style-loader将css插入到页面的style标签中。

npm install style-loader css-loader --save-dev

less-load 把less语法转换成css。

npm install less less-loader --save-dev

更多样式相关的配置可以参考https://www.cnblogs.com/zyly/p/12631745.html#_label4。

4.5 自己实现一个loader

如果向自己定义一个loader，可以参考https://www.webpackjs.com/contribute/writing-a-loader/。

五 模块

5.1 什么是webpack模块

在webpack里一切皆模块，一个模块对应着一个文件。对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

• ES2015 import 语句
• CommonJS require() 语句
• AMD define 和 require 语句
• css/sass/less 文件中的 @import 语句。
• 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

webpack会从配置的entry开始递归找出所有依赖的模块。

module:{
    rules:[
    {
        test:/.xxx$/,//指定匹配规则
        use:{
            loader: 'xxx-load'//指定使⽤用的loader
        }
    }
    ]
}

当webpack处理到不认识的模块时，需要在webpack中的module选项进行配置，当检测到是什么格式的模块，使用什么loader来处理。

5.2 模块方法

5.3  模块变量

webpack中的模块变量主要有：

module.hot

module.exports

module.process

 六 插件

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

6.1 HtmlWebpackPlugin

htmlwebpackplugin会在打包结束后，自动生成一个html文件，并把打包生成的js模块引入到该html中。

npm install --save-dev html-webpack-plugin

配置：

• title: 用来生成页面的title元素
• filename: 输出的 HTML文件名，默认是 index.html, 也可以直接配置带有子目录
• template: 模板文件路径，支持加载器，比如 src/index.html
• inject: true | 'head' | 'body' | false ,注入所有的资源到特定的template或者 templateContent 中，如果设置为 true 或者body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中
• favicon: 添加特定的 favicon 路径到输出的 HTML 文件中
• minify: {} | false , 传递 html-minifier 选项给 minify 输出
• hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译
• hash 到所有包含的脚本和 CSS文件，对于解除 cache 很有用。
• cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
• showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML页面中
• chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
• chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
• excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})
    ],
    module: {
        rules: [
            { test: /.css$/, use: 'css-loader' },
            { test: /.ts$/, use: 'ts-loader' },
            {
                test: /.(png|jpe?g|gif)$/,
                //use使⽤用⼀一个loader可以⽤用对象，字符串串，两个loader需要⽤用数组
                use: {
                    loader: "file-loader",
                    // options额外的配置，⽐如资源名称
                    options: {
                        //生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名
                        name: "[hash].[ext]",
                        //打包后的存放位置
                        outputPath: "images/",
                    }
                }
            }
        ]
    }
};

src/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>

测试在命令行运行npm run build，会在dist下生成index.html文件，并把打包生成的js模块引入到该html中。

右键dist/index.html文件，run 'index/html'：

6.2 CleanWebpackPlugin 

由于我们每次重新打包时都会在dist下生成文件，而dist目录并不会在打包前自动清理，这回导致我们不知道哪些文件时本次打包生成的。因此，在每次构建前清理 /dist 文件夹，是比较推荐的做法。

clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。

npm install clean-webpack-plugin --save-dev

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    devServer: {
        contentBase: "./dist",
        open:true,
        port:8081
    },
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'}),
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            { test: /.css$/, use: 'css-loader' },
            { test: /.ts$/, use: 'ts-loader' },
            {
                test: /.(png|jpe?g|gif)$/,
                //use使⽤用⼀一个loader可以⽤用对象，字符串串，两个loader需要⽤用数组
                use: {
                    loader: "file-loader",
                    // options额外的配置，⽐如资源名称
                    options: {
                        //生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名
                        name: "[hash].[ext]",
                        //打包后的存放位置
                        outputPath: "images/",
                    }
                }
            }
        ]
    }
};

webpack 提供许多开箱可用的插件！查阅我们的插件列表获取更多信息。

在 webpack 配置中使用插件是简单直接的，然而也有很多值得我们进一步探讨的用例。

6.3 自己定义一个插件

如果想自己定义一个插件，可以参考博客https://www.webpackjs.com/contribute/writing-a-plugin/。

七 开发

7.1 source map

当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

source map 有很多不同的选项可用，请务必仔细阅读它们，以便可以根据需要进行配置。

在这里，我们使用 inline-source-map 选项，这有助于解释说明我们的目的（仅解释说明，不要用于生产环境）：

webpack.config.js推荐配置：

devtool:"cheap-module-eval-source-map",// 开发环境配置
devtool:"cheap-module-source-map", // 线上⽣生成配置

devtool，选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

7.2 WebpackDevServer

每次改完代码都需要重新打包⼀次，打开浏览器器，刷新⼀次，很麻烦。我们可以安装使⽤WebpackDevServer来改善这块的体验。

启动服务后，会发现dist目录没有了，这是因为devServer把打包后的模块不会放在dist目录下，而是放到内存中，从而提升速度。

 npm install webpack-dev-server --save-dev

在webpack.config.js配置

    devServer: {
        contentBase: "./dist",
        open:true,
        port:8081
    },

由于我安装的最新的webpack v5.0.0，webpack-cli v4.0.0，和webpack-dev-server不兼容，所以我卸载了webpack、webpack-cli和webpack-dev-server：

npm uninstall webpack webpack-cli webpack-dev-server

然后安装指定版本：

npm install webpack-dev-server@3.10.3 webpack@4.42.0 webpack-cli@3.1.2 --save-dev

修改下package.json，添加start脚本：

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "file-loader": "^6.1.1",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.10.3"
  }
}

运行npm run start，打开页面：

如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。webpack-dev-server 带有许多可配置的选项。转到相关文档以了解更多。

7.3 WebpackDevMiddleware

webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。具体使用可以移步官网，官网例子展示了如何使用webpack-dev-middleware启动一个应用程序。

八 模块热加载

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。

这么说你可能还是不太理解，那我举个例子，比如有一个录入用户信息的模块，需要输入用户名，性别，年龄信息，假设现在你已经把所有信息录入完成了，此时你突然发现还需要新增兴趣爱好信息的录入，然后你更改了代码，然后你需要手动去刷新浏览器，这样会导致所有输入的内容都丢失了，你还得重新录入一次。

为了解决网页整体刷新导致页面数据丢失的问题，我们就可以使用模块热替换来实现。具体案例可以参考webpack的模块热替换。

注意：HMR 不适用于生产环境，这意味着它应当只在开发环境使用。

8.1 启用HMR

启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。

修改webpack.config.js开启模块热替换：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    devtool:"cheap-module-eval-source-map",// 开发环境配置
    devServer: {
        contentBase: "./dist",
        open:true,
        port:8081,
        hot: true,               // 开启模块热替换
        hotOnly: true,           // 如果模块热替换功能不生效，则不刷新网页
    },
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'}),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()    // 使用webpack内置的模块热替换插件
    ],
    performance: {
        hints: "warning", // 枚举
        maxAssetSize: 30000000, // 整数类型（以字节为单位）
        maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
        assetFilter: function(assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');

        }
    },
    module: {
        rules: [
            { test: /.css$/, use: 'css-loader' },
            { test: /.ts$/, use: 'ts-loader' },
            {
                test: /.(png|jpe?g|gif)$/,
                //use使⽤用⼀一个loader可以⽤用对象，字符串串，两个loader需要⽤用数组
                use: {
                    loader: "file-loader",
                    // options额外的配置，⽐如资源名称
                    options: {
                        //生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名
                        name: "[hash].[ext]",
                        //打包后的存放位置
                        outputPath: "images/",
                        limit:2048
                    }
                }
            }
        ]
    }
};

如果你发现修改了js代码，页面不会热更新，并且报如下错误：

Ignored an update to unaccepted module，The following modules couldn’t be hot updated: (They would need a full reload!)

在src/index.html入口文件中加入：

if(module.hot){
    // accept itself
    module.hot.accept()
}

如果已经通过 HotModuleReplacementPlugin 启用了模块热替换(Hot Module Replacement)，则它的接口将被暴露在 module.hot 属性下面。
module.hot表示模块热替换(Hot Module Replacement) 是否启用。
module.hot.accept()接受自身更新，在此模块或依赖模块更新时，在不通知父母的情况下，可以对此模块处理和重新取值。

8.2 通过Node.js API

当使用 webpack dev server 和 Node.js API 时，不要将 devServer 选项放在 webpack.config.js中。而是，在创建选项时，将其作为第二个参数传递。例如：

new WebpackDevServer(compiler, options)

想要启用 HMR，还需要修改 webpack 配置对象，使其包含 HMR 入口起点。webpack-dev-server package 中具有一个叫做 addDevServerEntrypoints 的方法，你可以通过使用这个方法来实现。这是关于如何使用的一个小例子：

server.js

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.config.js');
const options = {
    contentBase: "./dist",
    open:true,
    hot: true,               // 开启模块热替换
    hotOnly: true,           // 如果模块热替换功能不生效，则不刷新网页
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);    //webpack 打包
const server = new webpackDevServer(compiler, options);  //dev server

//服务器开始监听
server.listen(8081, 'localhost', () => {
    console.log('dev server listening on port 8081');
});

然后修改package.json脚本：

 "server": "node server.js"

现在，在你的终端执行 npm run server将会启动应用:

九 babel-loader

babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
• 源码转换 (codemods)
• 更多！ (查看这些 视频 获得启发)

比如我们的箭头函数：

() => console.log('hello babel')

经过babel编译之后：

(function(){
    return console.log('hello babel');
});

会编译成浏览器可识别的ES5语法。

9.1 babel-loader使用

babel-loader是webpack与babel的通信桥梁。babel-loader的安装：

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev

在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中，像下面这样：

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      }
    }
  ]

遇到js文件就先用babel-loader处理，exclude表示排除 node_modules 文件夹中的文件。loader的配置就OK了，可是这样还不能发挥Babel的作用。在项目根目录下创建一个 .babelrc文件，添加代码：

{
  "presets": [
    "@babel/preset-env"
  ]
}

@babel/preset-env里包含了es6转es5的转换规则.

我们还希望能够在项目对一些组件进行懒加载，所以还需要一个babel插件：

npm install babel-plugin-syntax-dynamic-import --save-dev

在 .babelrc 文件中加入plugins配置：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}

由于babel 只转换语法(如箭头函数)， 你可以使用 @babel/polyfill 支持新的全局变量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。

npm install --save @babel/polyfill

在入口文件src/index.js引入就可以了：

import "@babel/polyfill";

当我们开发的是组件库，工具库这些场景的时候，polyfill就不适合了，因为polyfill是注入到全局变量window下的，会污染全局环境，所以推荐闭包方式：@babel/plugin-transform-runtime。

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

修改.babelrc文件：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "syntax-dynamic-import",
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

十 配置React打包环境

1 安装@babel/preset-react

@babel/preset-react用于react语法转译，babel-loader会编译jsx为React.createElement(...) 。

使用通过以下命令安装：

npm install react react-dom @babel/preset-react --save-dev

并将 @babel/preset-react 添加到你的 babel 配置文件中：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

修改src/index.js代码：

import React, { Component } from "react";
import ReactDom from "react-dom";
class App extends Component {
    render() {
        return <div>hello world</div>;
    }
}
ReactDom.render(<App />, document.getElementById("root"));

运行npm run start，输出如下：

参考文章：

[1]Babel基础知识整理