语言►nodejs►库►webpack

webpack配置中的context属性和entry属性

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/02/webpack%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84context%E5%B1%9E%E6%80%A7%E5%92%8Centry%E5%B1%9E%E6%80%A7/

摘要

本文主要讲述了：

  1. context
  2. entry

正文

context

在webpack中，context的默认值是 CWD。推荐将context修改为项目的根目录，这样可以使得项目配置独立于 CWD。

context作为上下文路径，用于解析webpack.config.js中的entry、loader。

示例：

learn_webpack/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  context: __dirname,
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
    ],
  },
};

./src/index.js -> /home/jsweibo/Documents/learn_webpack/src/index.js

babel-loader -> /home/jsweibo/Documents/learn_webpack/node_modules/babel-loader

entry

entry 可以是一个，也可以是多个。

单个 entry 以字符串的形式配置，多个 entry 以数组或对象的形式配置。

  • 以字符串或数组的形式配置 entry，则打包出来的代码块默认被命名为main.js
  • 以对象的形式配置 entry，则 key 表示代码块的名称，value 表示代码块的入口文件

示例：

1
2
3
4
module.exports = {
  context: __dirname,
  entry: './src/home.js',
};

打包成功后，webpack会输出 1 个 JavaScript 文件，名为main.js。

示例：

1
2
3
4
module.exports = {
  context: __dirname,
  entry: ['./src/home.js', './src/about.js'],
};

打包成功后，webpack会输出 1 个 JavaScript 文件，名为main.js。

示例：

1
2
3
4
5
6
7
module.exports = {
  context: __dirname,
  entry: {
    home: './src/home.js',
    about: './src/about.js',
  },
};

打包成功后，webpack会输出 2 个 JavaScript 文件，分别名为home.js、about.js。

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/02/webpack%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84context%E5%B1%9E%E6%80%A7%E5%92%8Centry%E5%B1%9E%E6%80%A7/

本文对你有帮助？请支持我

支付宝
微信