Babel与webpack

Babel 是什么#

Babel 是一个 JavaScript 编译器（转译器），负责把新的 JavaScript 代码转换成旧环境也能运行的代码。

为什么需要 Babel？

现代浏览器支持，但老浏览器（比如 IE）不支持箭头函数。Babel 可以把它转换成：

1
const fn = (a, b) => a + b;
2

3
//转换
4
var fn = function (a, b) {
5
  return a + b;
6
};

Babel 能干什么？

转换 ES6+ 语法：箭头函数、类、模板字符串、解构赋值，转换模块语法，转换实验性语法，编译 JSX以前 Node 不支持 ESM 时，经常这么干。Babel 不是打包工具，是负责代码转换

1
import { add } from './math.js';
2
//转换成
3
const { add } = require('./math');

Babel 的使用方式#

Babel 的使用方式其实就三步：安装 Babel-配置 Babel-执行编译

初始化项目

1
npm init -y

安装 Babel

1
npm install -D @babel/core @babel/cli @babel/preset-env

创建源码：

1
const fn = (a, b) => a + b;
2
console.log(fn(1, 2));

配置 Babel：

1
//babel.config.json
2
{
3
  "presets": ["@babel/preset-env"]
4
}
5
//或者
6
//.babelrc
7
{
8
  "presets": ["@babel/preset-env"]
9
}

执行编译

1
npx babel src -d dist

生成：dist/index.js

1
"use strict";
2
var fn = function fn(a, b) {
3
  return a + b;
4
};
5
console.log(fn(1, 2));

package.json 配置脚本

1
{
2
  "scripts": {
3
    "build": "babel src -d dist"
4
  }
5
}

指定目标环境：如果这里不设置，Babel（@babel/preset-env）默认会根据**目标环境（targets）**决定是否转换，现代环境下就不转换了

1
{
2
  "presets": [
3
    [
4
      "@babel/preset-env",
5
      {
6
        "targets": {
7
          "chrome": "80"
8
        }
9
      }
10
    ]
11
  ]
12
}
13
//只兼容 Chrome80+

配合 browserslist，Babel 会自动根据目标浏览器决定转换哪些语法。

1
//package.json
2
{
3
  "browserslist": [
4
    ">1%",
5
    "last 2 versions",
6
    "not dead"
7
  ]
8
}

使用 Babel 前的准备工作#

• 安装nodejs和npm ；推荐使用nvm
• 初始化项目(Babel 的使用方式已经有讲解)
• 安装bable需要的包(Babel 的使用方式已经有讲解)

使用 Babel 编译 ES6 代码#

• Babel 的使用方式已经有讲解

Webpack是什么#

• Webpack 是一个静态模块打包工具（Static Module Bundler）。
• webpack是静态模块打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件
• 模块：webpack可以处理js/css/图片、图标字体等单位文件
• 静态：开发过程中存在于本地的js/css/图片/图标字体等文件，就是静态的
• 动态内容webpack没办法处理

Webpack 初体验#

初始化项目

1
mkdir webpack-demo
2
cd webpack-demo
3
npm init -y

安装webpack需要的包

1
npm i webpack webpack-cli -D

创建示例代码：

src/math.js

1
export function add(a, b) {
2
  return a + b;
3
}

src/index.js

1
import { add } from './math';
2

3
console.log(add(1, 2));

配置webpack

1
const path = require('path');
2
module.exports = {
3
  mode: 'development', //  development开发模式 production生产模式
4
  entry: './src/index.js',
5
  output: {
6
    filename: 'bundle.js',
7
    path: path.resolve(__dirname, 'dist'),
8
  },
9
};

development（开发模式）：不压缩、可读性强、调试友好、构建快

production（生产模式）：代码压缩、Tree Shaking、性能优化、文件更小

打包测试

1
npx webpack
2
node dist/bundle.js

entry和output#

• webpacke的4核心概念：entry、output、loader、plugins
• entry输入：就是程序入口
• output输出：打包之后路径

loader#

Loader 的作用：让 Webpack 能“读懂”非 JS 文件

试试babel-loader，ES6 → ES5

1
npm i -D babel-loader

1
const path = require('path');
2

3
module.exports = {
4
  mode: 'development',
5
  entry: './src/index.js',
6
  output: {
7
    filename: 'bundle.js',
8
    path: path.resolve(__dirname, 'dist'),
9
  },
10
  module: {
11
    rules: [
12
      {
13
        test: /\.(js|jsx)$/,
14
        use: ['babel-loader'],
15
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
16
      },
17
    ],
18
  },
19
};

Loader 可以链式执行，执行顺序是 从右到左

1
use: ['style-loader', 'css-loader', 'postcss-loader']

plugins#

Plugin 用来“增强 Webpack 的能力”，而不是转换单个文件。

做什么：监听 Webpack 整个生命周期，做“全局事情”，比如打包前清空 dist、自动生成 HTML、压缩 JS、提取 CSS、打包分析、注入环境变量

区别：

举例： 清理 dist，插件clean-webpack-plugin ，每次打包前清空 dist目录

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

1
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
2
plugins: [new CleanWebpackPlugin()]

从 Webpack 5 开始，官方已经内置了类似功能，可以直接使用

1
module.exports = {
2
  output: {
3
    clean: true
4
  }
5
};

举例： 插件HtmlWebpackPlugin，该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

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

1
const HtmlWebpackPlugin = require('html-webpack-plugin');
2
plugins: [ new HtmlWebpackPlugin()],

HtmlWebpackPlugin进阶使用：多个js入口文件，多个html，a.html引入a.js，b.html引入b.js；并且配置压缩minify

1
const path = require('path');
2
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
4
module.exports = {
5
  mode: 'development',
6

7
  entry: {
8
    index: './src/index.js',
9
    search: './src/search.js',
10
  },
11

12
  output: {
13
    filename: '[name].js',
14
    path: path.resolve(__dirname, 'dist'),
15
    clean: true,
16
  },
17
  module: {
18
    rules: [
19
      {
20
        test: /\.(js|jsx)$/,
21
        use: ['babel-loader'],
22
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
23
      },
24
    ],
25
  },
26
  plugins: [
27
    new HtmlWebpackPlugin({
28
      // template: 'index.html',不写模板，自动创建，demo样式可以这样
29
      filename: 'index.html', //重命名
30
      chunks: ['index'], //指定引入
31
      minify: {
32
        collapseWhitespace: true,
33
        keepClosingSlash: true,
34
        removeComments: true,
35
        removeRedundantAttributes: true,
36
        removeScriptTypeAttributes: true,
37
        removeStyleLinkTypeAttributes: true,
38
        useShortDoctype: true,
39
      },
40
    }),
41
    new HtmlWebpackPlugin({
42
      // template: 'search.html',
43
      filename: 'search.html', //重命名
44
      chunks: ['search'], //指定引入
45
      minify: {
46
        collapseWhitespace: true,
47
        keepClosingSlash: true,
48
        removeComments: true,
49
        removeRedundantAttributes: true,
50
        removeScriptTypeAttributes: true,
51
        removeStyleLinkTypeAttributes: true,
52
        useShortDoctype: true,
53
      },
54
    }),
55
  ],
56
};

处理CSS文件#

webpack不认识除js以外的文件，所以这里需要loader

安装：

1
npm install -D style-loader css-loader

配置 Webpack

1
const path = require('path');
2

3
module.exports = {
4
  mode: 'development',
5

6
  entry: './src/index.js',
7

8
  output: {
9
    filename: 'bundle.js',
10
    path: path.resolve(__dirname, 'dist')
11
  },
12

13
  module: {
14
    rules: [
15
      {
16
        test: /\.css$/,
17
        use: ['style-loader', 'css-loader'] //⚠️loader 执行顺序是从右到左
18
      }
19
    ]
20
  }
21
};

Webpack 实际做了这些事：

1：css-loader 阶段：把style.css转换成 JS 模块，类似：export default "body { background: pink; }";

2：style-loader 阶段：把 CSS 插入 DOM，类似：

1
const style = document.createElement('style');
2
style.innerHTML = "body { background: pink; }";
3
document.head.appendChild(style);

进阶处理CSS，使用link方式引入

安装插件：mini-css-extract-plugin

1
npm install -D mini-css-extract-plugin

使用：

1
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
2
{
3
        test: /\.css$/,
4
        use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
5
      },
6
new MiniCssExtractPlugin({
7
      filename: 'css/[name].css',
8
    }),

完整：

1
const path = require('path');
2
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
4
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5
module.exports = {
6
  mode: 'production',
7

8
  entry: {
9
    index: './src/index.js',
10
    search: './src/search.js',
11
  },
12

13
  output: {
14
    filename: '[name].js',
15
    path: path.resolve(__dirname, 'dist'),
16
    clean: true,
17
  },
18
  module: {
19
    rules: [
20
      {
21
        test: /\.(js|jsx)$/,
22
        use: ['babel-loader'],
23
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
24
      },
25
      {
26
        test: /\.css$/,
27
        use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
28
      },
29
      {
30
        test: /\.(png|jpg|jpeg|gif)$/i,
31
        type: 'asset/resource',
32
      },
33
      {
34
        test: /\.(png|jpg|jpeg)$/i,
35
        use: [
36
          {
37
            loader: 'image-webpack-loader',
38
            options: {
39
              mozjpeg: {
40
                quality: 70,
41
              },
42
            },
43
          },
44
        ],
45
      },
46
    ],
47
  },
48
  plugins: [
49
    new HtmlWebpackPlugin({
50
      // template: 'index.html',不写模板，自动创建，demo样式可以这样
51
      filename: 'index.html', //重命名
52
      chunks: ['index'], //指定引入
53
      minify: {
54
        collapseWhitespace: true,
55
        keepClosingSlash: true,
56
        removeComments: true,
57
        removeRedundantAttributes: true,
58
        removeScriptTypeAttributes: true,
59
        removeStyleLinkTypeAttributes: true,
60
        useShortDoctype: true,
61
      },
62
    }),
63
    new HtmlWebpackPlugin({
64
      // template: 'search.html',
65
      filename: 'search.html', //重命名
66
      chunks: ['search'], //指定引入
67
      minify: {
68
        collapseWhitespace: true,
69
        keepClosingSlash: true,
70
        removeComments: true,
71
        removeRedundantAttributes: true,
72
        removeScriptTypeAttributes: true,
73
        removeStyleLinkTypeAttributes: true,
74
        useShortDoctype: true,
75
      },
76
    }),
77
    new MiniCssExtractPlugin({
78
      filename: 'css/[name].css',
79
    }),
80
  ],
81
};

使用file-loader处理CSS中的图片#

• webpack不会处理远程的图片，所以，如果图片是在外部服务器的，webpack不会处理，可以正常执行

• 注意：在webpack4之前，处理本地css图片是需要这个包的，但是webpack5新增了Asset Modules，并且默认开启，所以在webpack5即便什么都不做，也不会出错，file-loader在webpack5不推荐使用

• file-loader使用 ⚠2026年6月25日，webpack5下这插件不能使用，有问题，推荐新写法

  1
  npm install -D file-loader

  1
  const path = require('path');
  2
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  3
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  4
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5
  module.exports = {
  6
    mode: 'production',
  7
  
  8
    entry: {
  9
      index: './src/index.js',
  10
      search: './src/search.js',
  11
    },
  12
  
  13
    output: {
  14
      filename: '[name].js',
  15
      path: path.resolve(__dirname, 'dist'),
  16
      clean: true,
  17
    },
  18
    module: {
  19
      rules: [
  20
        {
  21
          test: /\.(js|jsx)$/,
  22
          use: ['babel-loader'],
  23
          exclude: [path.join(__dirname, './node_modules')], //排除node_modules
  24
        },
  25
        {
  26
          test: /\.css$/,
  27
          use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
  28
        },
  29
        // webpack5新特性
  30
        // {
  31
        //   test: /\.(png|jpg|jpeg|gif)$/i,
  32
        //   type: 'asset/resource',
  33
        // },
  34
        {
  35
          test: /\.(png|jpg|jpeg|gif)$/i,
  36
          use: [
  37
            {
  38
              loader: 'file-loader',
  39
              options: {
  40
                name: '[name].[hash].[ext]',
  41
                outputPath: 'images',
  42
              },
  43
            },
  44
          ],
  45
        },
  46
  
  47
      ],
  48
    },
  49
    plugins: [
  50
      new HtmlWebpackPlugin({
  51
        // template: 'index.html',不写模板，自动创建，demo样式可以这样
  52
        filename: 'index.html', //重命名
  53
        chunks: ['index'], //指定引入
  54
        minify: {
  55
          collapseWhitespace: true,
  56
          keepClosingSlash: true,
  57
          removeComments: true,
  58
          removeRedundantAttributes: true,
  59
          removeScriptTypeAttributes: true,
  60
          removeStyleLinkTypeAttributes: true,
  61
          useShortDoctype: true,
  62
        },
  63
      }),
  64
      new HtmlWebpackPlugin({
  65
        // template: 'search.html',
  66
        filename: 'search.html', //重命名
  67
        chunks: ['search'], //指定引入
  68
        minify: {
  69
          collapseWhitespace: true,
  70
          keepClosingSlash: true,
  71
          removeComments: true,
  72
          removeRedundantAttributes: true,
  73
          removeScriptTypeAttributes: true,
  74
          removeStyleLinkTypeAttributes: true,
  75
          useShortDoctype: true,
  76
        },
  77
      }),
  78
      new MiniCssExtractPlugin({
  79
        filename: 'css/[name].css',
  80
      }),
  81
    ],
  82
  };

  展开收起

  webpack新写法：asset/resource

  1
  const path = require('path');
  2
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  3
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  4
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5
  module.exports = {
  6
    mode: 'production',
  7
  
  8
    entry: {
  9
      index: './src/index.js',
  10
      search: './src/search.js',
  11
    },
  12
  
  13
    output: {
  14
      filename: '[name].js',
  15
      path: path.resolve(__dirname, 'dist'),
  16
      clean: true,
  17
    },
  18
    module: {
  19
      rules: [
  20
        {
  21
          test: /\.(js|jsx)$/,
  22
          use: ['babel-loader'],
  23
          exclude: [path.join(__dirname, './node_modules')], //排除node_modules
  24
        },
  25
        {
  26
          test: /\.css$/,
  27
          use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
  28
        },
  29
        // webpack5新特性
  30
        {
  31
          test: /\.(png|jpg|jpeg|gif)$/i,
  32
          type: 'asset/resource',
  33
          generator: {
  34
            filename: 'img/[name].[contenthash][ext]', //img文件夹下创建图片
  35
          },
  36
        },
  37
      ],
  38
    },
  39
    plugins: [
  40
      new HtmlWebpackPlugin({
  41
        // template: 'index.html',不写模板，自动创建，demo样式可以这样
  42
        filename: 'index.html', //重命名
  43
        chunks: ['index'], //指定引入
  44
        minify: {
  45
          collapseWhitespace: true,
  46
          keepClosingSlash: true,
  47
          removeComments: true,
  48
          removeRedundantAttributes: true,
  49
          removeScriptTypeAttributes: true,
  50
          removeStyleLinkTypeAttributes: true,
  51
          useShortDoctype: true,
  52
        },
  53
      }),
  54
      new HtmlWebpackPlugin({
  55
        // template: 'search.html',
  56
        filename: 'search.html', //重命名
  57
        chunks: ['search'], //指定引入
  58
        minify: {
  59
          collapseWhitespace: true,
  60
          keepClosingSlash: true,
  61
          removeComments: true,
  62
          removeRedundantAttributes: true,
  63
          removeScriptTypeAttributes: true,
  64
          removeStyleLinkTypeAttributes: true,
  65
          useShortDoctype: true,
  66
        },
  67
      }),
  68
      new MiniCssExtractPlugin({
  69
        filename: 'css/[name].css',
  70
      }),
  71
    ],
  72
  };

  展开收起

使用html-withimg-loader处理HTML中的图片#

处理html的图片

安装

1
npm install -D html-withimg-loader

使用

1
const path = require('path');
2
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
4
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5
module.exports = {
6
  mode: 'production',
7

8
  entry: {
9
    index: './src/index.js',
10
    search: './src/search.js',
11
  },
12

13
  output: {
14
    filename: '[name].js',
15
    path: path.resolve(__dirname, 'dist'),
16
    clean: true,
17
  },
18
  module: {
19
    rules: [
20
      {
21
        test: /\.(js|jsx)$/,
22
        use: ['babel-loader'],
23
        exclude: [path.join(__dirname, './node_modules')], //排除node_modules
24
      },
25
      {
26
        test: /\.css$/,
27
        use: [MiniCssExtractPlugin.loader, 'css-loader'], //换MiniCssExtractPlugin.loader
28
      },
29
      // webpack5新特性
30
      {
31
        test: /\.(png|jpg|jpeg|gif)$/i,
32
        type: 'asset/resource',
33
        generator: {
34
          filename: 'img/[name].[contenthash][ext]', //img文件夹下创建图片
35
        },
36
      },
37
      // 处理html的图片，没有这个loader会报错
38
      {
39
        test: /\.html$/,
40
        use: ['html-withimg-loader'],
41
      },
42
      //webpack5 推荐使用html-loader
43
      // {
44
      //   test: /\.html$/,
45
      //   loader: 'html-loader',
46
      // },
47
    ],
48
  },
49
  plugins: [
50
    new HtmlWebpackPlugin({
51
      template: './src/index.html', //不写模板，自动创建，demo样式可以这样
52
      filename: 'index.html', //重命名
53
      chunks: ['index'], //指定引入
54
      minify: {
55
        collapseWhitespace: true,
56
        keepClosingSlash: true,
57
        removeComments: true,
58
        removeRedundantAttributes: true,
59
        removeScriptTypeAttributes: true,
60
        removeStyleLinkTypeAttributes: true,
61
        useShortDoctype: true,
62
      },
63
    }),
64
    new HtmlWebpackPlugin({
65
      // template: 'search.html',
66
      filename: 'search.html', //重命名
67
      chunks: ['search'], //指定引入
68
      minify: {
69
        collapseWhitespace: true,
70
        keepClosingSlash: true,
71
        removeComments: true,
72
        removeRedundantAttributes: true,
73
        removeScriptTypeAttributes: true,
74
        removeStyleLinkTypeAttributes: true,
75
        useShortDoctype: true,
76
      },
77
    }),
78
    new MiniCssExtractPlugin({
79
      filename: 'css/[name].css',
80
    }),
81
  ],
82
};

webpack5推荐html-loader

1
npm install -D html-loader

1
     //webpack5 推荐使用html-loader
2
{
3
      test: /\.html$/,
4
     loader: 'html-loader',
5
 },

使用file-loader处理JS中的图片#

JS 中的图片不是“被处理”，而是“被 import 之后交给 loader 处理”

webpack5也不推荐使用，也无需使用，因为asset/resource已经处理了，使用file-loader也会出问题，不要用

安装：

1
npm install -D file-loader

使用

1
{
2
  test: /\.(png|jpg|jpeg|gif)$/i,
3
  use: [
4
    {
5
      loader: 'file-loader',
6
      options: {
7
        name: '[name].[hash].[ext]',
8
        outputPath: 'images',
9
      },
10
    },
11
  ],
12
}

使用url-loader处理图片#

url-loader 是 Webpack 4 时代非常经典的图片 loader，但现在已经基本被 Webpack5 的 Asset Modules 取代了。

webpack5替代方案

1
{
2
  test: /\.(png|jpg|jpeg|gif)$/i,
3
  type: 'asset',
4
  parser: {
5
    dataUrlCondition: {
6
      maxSize: 10 * 1024 // 10kb以下转base64
7
    }
8
  }
9
}

使用webpack-dev-server搭建开发环境#

• 让 webpack 在内存里打包 + 自动刷新浏览器 + 支持热更新

• 如果不用它，现在是这样开发：

  1
  写代码 → npx webpack → 打包到 dist → 手动刷新浏览器

• 用了 dev-server：

  1
  写代码 → 自动编译 → 浏览器自动更新（不用刷新）

• 安装

  1
  npm install -D webpack-dev-server

• 使用

  1
  devServer: {
  2
    static: {
  3
      directory: path.join(__dirname, 'dist'),
  4
    },
  5
    port: 8080,
  6
    open: true,
  7
    hot: true,
  8
  },