webapck - 标签 - 肉蛋葱鸡肉粥🍛的博客☕ http://example.org/tags/webapck/ webapck - 标签 - 肉蛋葱鸡肉粥🍛的博客☕ Hugo -- gohugo.iozh-CN1336352883@qq.com (yzuxqz) 1336352883@qq.com (yzuxqz)Thu, 05 Aug 2021 10:41:53 +0800 webpack http://example.org/posts/webpack/ Thu, 05 Aug 2021 10:41:53 +0800 作者 http://example.org/posts/webpack/ 入口

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

在webpack.config.js

  1. 对象写法（可扩展性高）
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',
  },
};

描述入口对象属性

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

  2. 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',
    },
  },
}

输出

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

    1
2
3
4
5
6

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

  2. 使用内部chunk id

    1
2
3
4
5
6

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

  3. 同时配置多个入口

     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

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

  2. 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会根据该配置定义的属性进行处理。

模式

]]>