webpack官方文档分析：概念

Posted 2020-12-25 Felix Wang

1、概念

　　webpack的核心是将javascript应用程序的静态捆绑模块。当webpack处理您的应用程序时，它会在内部构建一个依赖关系图，它映射您的项目所需的每个模块并生成一个或多个包。

从版本4.0.0开始，webpack不需要配置文件来捆绑您的项目，但它可以非常灵活地配置以更好地满足您的需求

 

　　（1）Entry：

　　一个entry point指示哪个模块的WebPack应该使用开始建立了它的内部依赖关系图，将的WebPack找出entry point取决于（直接或间接）哪些其他模块和库。

默认情况下，其值为./src/index.js，但您可以通过在webpack配置中配置entry属性来指定不同的（或多个入口点）。例如：

webpack.config.js

module.exports = {
  entry: ‘./path/to/my/entry/file.js‘
};

　　（2）Output：

　　output 属性告诉WebPack哪里在哪里发出它创建的包以及如何命名这些文件。，默认./dist/main.js主输出文件，以及将其他生成的文件输出到./dist文件夹。

您可以配置中指定输出文件夹：

webpack.config.js

const path = require(‘path‘);

module.exports = {
  entry: ‘./path/to/my/entry/file.js‘,
  output: {
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘my-first-webpack.bundle.js‘
  }
};

在上面的示例中，我们使用output.filename和output.path属性来告诉webpack我们的bundle的名称以及我们希望它发送到的位置。在顶部导入的路径模块，它是一个Node.js核心的模块，用于操作文件路径。

　　（3）Loaders

　　开箱即用，webpack只能理解JavaScript文件。Loaders允许WebPack处理其他类型的文件，并将它们转换成可被应用程序识别并添加到依赖图中的有效模块。

在较高级别，加载器在您的webpack配置中有两个属性：

1. 该test属性标识应转换的文件。
2. 该use属性指示应使用哪个加载程序进行转换。

webpack.config.js

const path = require(‘path‘);

module.exports = {
  output: {
    filename: ‘my-first-webpack.bundle.js‘
  },
  module: {
    rules: [
      { test: /.txt$/, use: ‘raw-loader‘ }
    ]
  }
};

上面的配置rules为具有两个必需属性的单个模块定义了一个属性：test和use。这告诉webpack的编译器如下

“嘿webpack编译器，当你遇到解析为require()/ importstatement语句中‘.txt‘文件的路径时，在将它添加到bundle之前使用它raw-loader来转换它。”

重要的是要记住，在webpack配置中定义规则时，您要在其下定义规则，module.rules而不是rules。为了您的便利，webpack会在不正确的情况下发出警告。

　　（4）Plugins

　　虽然加载器用于转换某些类型的模块，但可以利用插件执行更广泛的任务，如捆绑优化，资产管理和环境变量注入。

　　要使用插件，您需要将require()添加到plugins数组中。大多数插件都可以通过选项进行自定义。由于您可以在配置中多次使用插件用于不同目的，因此您需要通过使用new运算符调用它来创建它的实例。

webpack.config.js

const htmlWebpackPlugin = require(‘html-webpack-plugin‘); //installed via npm
const webpack = require(‘webpack‘); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /.txt$/, use: ‘raw-loader‘ }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: ‘./src/index.html‘})
  ]
};

在上面的示例中，html-webpack-plugin为您的应用程序生成一个html文件，自动注入所有生成的包

　　（5）Mode

　　通过设定mode参数设置为development，production或者none，您可以启用对应于每个环境的WebPack内置的优化。默认值为production。

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

　　（5）浏览器兼容性

webpack支持所有符合ES5标准的浏览器（不支持IE8及以下版本）。WebPack需要Promise的import()和require.ensure()。如果要支持旧版浏览器，则需要在使用这些表达式之前加载polyfill。