概念
webpack是现在JavaScript应用程序打包生成器。当webpack在处理程序的时候，会递归的构建依赖关系图，其中包括应用程序所需要的每个模块，然后将这些模块打包成bundle由浏览器加载，通常只有一个。
首先我们先理解四个概念：
-
入口（ Entry）
webpack创建程序的依赖关系图，那么是需要一个入口文件。入口文件告诉webpack是从哪里开始创建依赖关系图，然后根据依赖关系图进行打包所需要的文件。
在webpack中我们通过webpack 配置对象(webpack configuration object) 中的entry属性进行设置入口文件。如下例子：
//webpack.config.js
module.exports= {
entry: './main.js'
}
-
出口（Output）
当所有的资源（assets）一起后，还需要在哪里告诉webpack打包应用程序，webpack的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'
}
};
如上，我们通过output.filename和output.path告诉了bundle的名称和以及要生成到哪里。
-
Loader
在webpack中可以将项目中任何的资源作为模块来进行对待，然后webpack自身只理解JavaScript。loader是在文件被添加到依赖图中时，其转换为模块。
在较高层面中webpack中配置loader有两个目标：- 识别应该被对应loader进行转换的那些文件（test属性）
- 转换这些文件，从而使其能够被添加到依赖图中，并且最终添加到bundle中。（use属性）
//webpack.config.js
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：
“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”
-
插件(Plugins)
loader仅在每个文件的基础上进行转换，而插件更常用于在打包模块的“ compilation”和“ chunk”生命周期执行操作和自定义功能。
如果想要使用插件，必须先通过require()该插件，然后将其添加进入plugins数组中，我们也可以因为不同的目的多次使用同一个插件，这时需要通过new创建一个它的实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
