webpack

2021-08-05 约 870 字预计阅读 2 分钟

入口

指示webpack使用哪个模块，来作为构建其内部依赖图的开始

在webpack.config.js

对象写法（可扩展性高）

1
2
3
4
5
6
7
8
9


module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

2.单入口写法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

描述入口对象属性

dependOn：当前入口所依赖的入口，必须在该入口被加载前被加载

runtime：运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。

runtime 和 dependOn 不应在同一个入口上同时使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


module.exports = {
  entry: {
    a2: './a',
    b2: {
      runtime: 'x2',
      dependOn: 'a2',
      import: './b',
    },
  },
};

runtime 不能指向已存在的入口名称

1
2
3
4
5
6
7
8
9


module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    },
  },
};

dependOn 不能是循环引用的

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    },
  },
}

输出

使用入口(此chunk的名称)名称

1
2
3
4
5
6


module.exports = {
  //...
  output: {
    filename: '[name].bundle.js',
  },
};

使用内部chunk id

1
2
3
4
5
6


module.exports = {
  //...
  output: {
    filename: '[id].bundle.js',
  },
};

同时配置多个入口

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

loader

使用loader告诉webpack加载css文件或者解析ts

首先安装loader：npm install –save-dev css-loader ts-loader

webpack配置

1
2
3
4
5
6
7
8


module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

配置方式

module.rules 允许在 webpack 配置中指定多个 loader，loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
}

plugin

插件可以携带参数，必须在webpack配置中，向plugins属性传入一个new实例。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


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

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

配置

webpack的配置文件是JavaScript文件，文件内导出webpack配置对象。webpack会根据该配置定义的属性进行处理。

目录

webpack

入口

描述入口对象属性

输出

loader

配置方式

plugin

配置

模式