概念
Webpack是什么？
Webpack是一个JS应用程序的静态模块打包器，它会构建一个依赖图(depandency graph)，包含应用程序需要的每个模块，然后将这些模块打包成 bundle。
核心概念
- 入口 entry
- 出口 output
- loader
- plugins
webpack是高度可配置的。
入口（entry）
入口起点指定了webpack从哪个模块开始构建依赖关系图。webpack进入入口起点后，就会找出入口起点依赖的模块和库，这些依赖项在之后会被处理，输出到名为bundles的文件中。
entry属性是可以配置的，默认值是./src，
出口（output）
output属性指定了webpack在哪里输出创建的bundles，以及如何命名这些文件。默认值为./dist。
entry和output的配置示例如下：
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' //bundle的名称
}};
上面require的path模块是Node.js的核心模块，它是用来操作文件路径的。
事实上，entry和output可配置的特性还有很多，这里只做简单了解。
loader
一个完整的应用程序常常不止含有JS文件，loader就可以把各种类型的文件都转换成webpack能够处理的有效模块，因此它的作用是“转换”。
webpack loader 把所有类型的文件，转换成了依赖图和bundle可以直接引用的模块。
配置loader转换规则时的两个属性：
- text 属性 : 用于标识出应该被对应的loader转换的那些文件，
- use 属性 : 用于指定进行转换时使用的loader
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
解释：在webpack中定义loader时，要定义在module.rules数组中，这里表示当webpack识别到.txt路径时，打包前用 raw-loader进行转换。
plugins
plugins 是插件接口功能，插件功能很强大。
如果要使用插件，可以直接 require() 它，然后添加到 plugins 数组中，比如：
plugins: [
new HtmlWebpackPlugin( { template: './src/index.html' } )
]
这里通过new操作符创建了一个插件的实例，这样就可以在同一个配置文件中多次使用同一个插件。
