对webpack的初步研究1

一、概念：

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

• Entry
• Output
• Loaders
• Plugins

二

• Entry  

一个入口点指示哪个模块的WebPack应该使用开始建立了其内部的依赖关系图。webpack将确定入口点所依赖的其他模块和库（直接和间接）。

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

webpack.config.js

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

Output 

该输出属性告诉的WebPack哪里发出束它创建以及如何命名这些文件。它默认./dist/main.js为主输出文件和./dist任何其他生成文件的文件夹。

您可以通过output在配置中指定字段来配置此过程的这一部分：

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'
  }
};

Loaders

开箱即用，webpack只能理解JavaScript文件。装载机允许的WebPack处理其他类型的文件，并将其转换为有效的模块，可以通过您的应用程序消耗并添加到依赖关系图。

请注意，import任何类型的模块（例如.css文件）的功能都是特定于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会在不正确的情况下发出警告。

在装载程序部分中包含装载程序时，可以检查进一步的自定义。

Plugins

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

查看插件界面以及如何使用它来扩展webpacks功能。

要使用插件，您需要将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'})
  ]
};

Mode 

By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.

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

Browser Compatibility

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

、