概念
webpack是一个为现代JavaScript应用的打包工具(a static module bundler)。
当webpack处理应用时，在其内部，会生成一个依赖图(dependency graph)，这个依赖图可以映射到项目里的每一个包，最终生成一个或者多个bundle。
从4.0版本开始，webpack不再需要配置文件，虽然如此，webpack还是可以很好的适应你的需求。 webpack有以下几个核心概念
- Entry
- Output
- Loaders
- Plugins
Entry
entry point指定webpack用哪个module(模块)开始构建其内部依赖图，webpack会计算出entry point直接或者间接依赖的其他module和library。
Entry的默认值是./src/index.js，但是你可以通过配置entyry属性来指定一个不同的(或者多个entry points)。
module.exports = { entry: './path/to/my/entry/file.js'}; Output
output属性告诉webpack打包出来的bundles放在哪里，如何命名这些文件。默认主输出文件时是./dist/main.js，./dist则放置生成的其他文件。
这些也都可以通过webpack的配置指定不同的值
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打包文件名字和输出目录。
至于在顶部引入的path模块，这是Node.js的一个核心模块，用于操作文件路径。
Loaders
webpack很蠢，只能解析JavaScript文件。Loader允许webpack处理其他类型的文件，并把他们转化成你应用中的可用的modules，然后加入到内部的依赖图。
在webpack配置中，Loaders有两个属性:test和use
test指定哪些文件需要转化use指定在转化时使用哪个loader
const path = require('path');module.exports = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }}; 上述配置为一个模块定义了一个rules属性，这会告诉wepack的编译器:
你好，
webpack编译器，当你遇到require或者import了一个.txt类型的文件时，在把他加入到bundle之前，请使用row-loader转化这个文件
Plugins
Loaders使用来转化特定类型的文件，Plugins则被用来做一些更大范围的task(任务)，例如bundle的优化，assets的管理，注入环境变量等。
要使用一个plugin，你需要require()并且把他加入plugins数组中。
大多数Plugins是可以配置的。你可以多次使用同一个插件做不同的事情，只需要通过new操作符，创建多个不同的实例即可。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npmconst webpack = require('webpack'); //to access built-in pluginsmodule.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ]}; 上面的例子中，html-webpack-plugin生成一个html文件，并自动注入生成的bundles
Mode
设置Mode参数为development、production、none，可以启用webpack内部对于每个环境的优化。默认值是production
module.exports = { mode: 'production'}; Translate from
Author: Zhuguannan