webpack官方文档分析（二）：概念
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配置中有两个属性：
- 该
test属性标识应转换的文件。 - 该
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。
