webpack简单概述翻译

官方网站：https://webpack.js.org/concepts/

概要

       webpack的核心是用于现代javascript应用程序的静态模型绑定器。当webpack处理你的应用时，webpack会在内部构建一个依赖图，这个图会映射你的项目所需要的每个模块，以及会生成一个或更多的包。

       自从4.0.0的版本发布后，webpack不要求配置文件来绑定你的项目了。尽管如此，它的配置性是难以置信的更加好的满足你的需求。

       要开始，你需求了解下面的这些概念。

        .Entry入口

        .Output输出

        .Loaders加载器

        .plugins插件

        .Mode模态

        .Browser Compatibility浏览器兼容

         这个文档旨在对这些概念进行一个高度的概述，同时提供详细具体概念用例的链接。

         为了更好的理解模块绑定器背后的想法，以及他们如何在引擎下工作，请参考下面的资源。

          .手动绑定应用程序

          .实时编码一个简单的模块绑定器

          .一个简单模块绑定器的详细说明

Entry入口

          入口点指示了webpack应该使用哪个模块开始构建其内部依赖关系图。webpack将找出入口点依赖的其他模块和库（直接和间接），默认情况下，它的值为./src/index/js，但是您可以通过在配置中配置entry属性来指定不同的（或多个入口点）.例如

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

Output输出

在上面的示例中，我们使用output.filename和output.path属性告诉webpack包的名称以及要将其发送到的位置。如果您想知道在顶部导入的路径模块，可以使用 node.js核心模块来操作文件路径。

Loaders

开箱即用，Webpack只理解JavaScript和JSON文件。加载程序允许Webpack处理其他类型的文件，并将其转换为有效的模块，这些模块可由应用程序使用并添加到依赖关系图中。

请注意，导入任何类型的模块（例如.css文件）的能力是Webpack特有的功能，可能不受其他绑定者或任务运行者的支持。我们认为这种语言的扩展是有必要的，因为它允许开发人员构建更精确的依赖关系图。

在较高级别上，加载程序在Webpack配置中有两个属性：

1.test属性标识应转换的文件。

2.use属性指示应使用哪个加载程序进行转换

const path = require('path');

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

上面的配置为具有两个必需属性的单个模块定义了一个rule属性：测试和使用。这将告诉Webpack的编译器以下信息

“嘿，Webpack编译器，当您遇到在require（）/import语句内解析为“.txt”文件的路径时，请在将其添加到包之前使用raw-loader对其进行转换。”

重要的是要记住，在Webpack配置中定义规则时，您是在module.rules下定义的，而不是在rules下定义的。为了您的利益，如果操作不正确，Webpack将警告您。

请记住，使用regex匹配文件时，不能引用它。例如，/\.txt$/与'/\.txt$/'或'/\.txt$/'不同。前者指示Webpack匹配以.txt结尾的任何文件，后者指示Webpack匹配具有绝对路径“.txt”的单个文件；这可能不是您的意图。

Plugins

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

为了使用插件，您需要（）它并将其添加到插件数组中。大多数插件都可以通过选项进行定制。由于您可以在一个配置中多次使用一个插件用于不同的目的，所以您需要通过使用新的操作符来调用它来创建一个插件实例。

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插件通过自动注入所有生成的包，为应用程序生成一个html文件。

在Webpack配置中使用插件很简单。然而，有许多用例值得进一步探索。在这里了解更多。

Mode

通过将模式参数设置为“开发”、“发布”或“无”，您可以启用与每个环境对应的Webpack内置优化。默认值为发布。

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

Browser Compatibility

Webpack支持所有符合ES5的浏览器（不支持IE8及以下版本）。webpack需要import（）和require.secure（）的承诺。如果要支持较旧的浏览器，则在使用这些表达式之前需要加载polyfill

后记

   后面的不打算翻译了，大家还是自己去看官方文档吧，对我来说，一边翻译一边记下单词是非常好的背单词的方法，而且比我平时找各种资料来学英语有动力多了。

map:绘制，映射                             manipulate 操纵，处理
nevertheless:然后，尽管如此                be consumed by 消耗，使用
incredibly:不可思议，难以置信              Note that 请注意 
compatibility:兼容性                      any type 任何类型
overview:概述                             feature 特征
manually:手工地                           specific 明确的，特定的
indirectly:间接地                         extension 扩大，延伸
specify:具体地                            warranted 使用必要，使正当
In case:假设,如果                         identifies:确定，标识
raw :原始地                               and not 而不是
instructs:指示，教授                       customization 自定义
optimization :最佳优化                     injection:注入
perform:执行                               variable:变量
be leveraged to ：利用                     multiple times:多次
straightforward:简单的，易懂的              built-in：内置的，优化
take place on:发生，举行