共计 2560 个字符，预计需要花费 7 分钟才能阅读完成。
本人公众号：前端修炼之路，欢迎关注。
之前用过 gulp、grunt，但是一直没有学习过 webpack。这两天刚好有时间，学习了下 webpack。webpack 要想深入研究，配置的东西比较多，网上的资源也有很多。我这里学习的主要途径是 webpack 官方给出的指南，和 webpack 中文网的翻译版本。因为我觉得第一手资料肯定是官网给出的更权威一些。
我学习的过程是，先看一遍中文网的文章，对每一节的内容有个大致印象和理解；然后再看一遍英文的官方文档，按照官方文档给出的示例配置文件照着做一遍。如果哪里英文理解有问题，再照着中文的文档反复思考一下。所以我的这篇文章，也有类似翻译英文官方文档。因为我就说照着文档操作，然后再把这个过程按照自己的理解重新整理成文章。
之所以这么做的原因是，一方面要提高自己的英文文档阅读和理解能力，另一方面是中文的文档一般都会更新得比较滞后和有不少错误，不能光按照中文手册去做。最后就是肯定要动手自己操作一遍的，理解起来是一回事儿，操作起来就是另外一回事儿了。
在这个过程中，主要有一下几点心得：
后悔没有早点学 webpack，功能太强大了。
webpack 功能和概念真多，感觉一下子学不完，只能用啥学啥。先整理出主要内容，细节一点点学习、补充。
通过一段时间的锻炼，阅读英文文档能力有所提高，需要继续努力。争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。
以下是正文~
概念
在开始之前，必须要知道 webpack 涉及的概念。目前我学习 webpack 是最新的版本是 v4.27.1，另外官网明确指出，从 webpack 4 以上开始，就不在需要必须制定配置文件，但是仍然具备可扩展性。
为了学习 webpack，需要理解的核心概念：
Entry：入口
Output：输出
Loaders：loader
Plugins：插件
Mode：模式
Browser Compatibility：浏览器兼容
Entry
entry 说简单点，就是没有打包之前的原文件。可以指定一个文件、可以指定多个文件或者不同目录下的文件。入股不指定，默认值为：./src/index.js。在配置文件中指定其他文件时，例如：
module.exports = {
entry: ‘./path/to/my/entry/file.js’
};
Output
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’
}
};
上面例子中，使用 output.filename 和 output.path 属性，告诉 webpack 打包文件的名字和打包文件的目录。其中的 path 模块是，Node.js 模块。
Loaders
webpack 只能识别 JavaScript 和 JSON 文件，Loaders 允许 webpack 处理其他类型的文件。在 webpack 配置文件中，需要指定一下两个属性
test：test 属性告诉 webpack 哪些文件需要被转换。
use：use 属性告诉 webpack 相应的文件使用哪个 loader 进行转换。
例如：
webpack.config.js
const path = require(‘path’);
module.exports = {
output: {
filename: ‘my-first-webpack.bundle.js’
},
module: {
rules: [
{test: /\.txt$/, use: ‘raw-loader’}
]
}
};
上面的配置中定义了一个 module.rules 属性，这个属性又有两个属性：test 和 use。这就好像告诉 webpack 编译器说：
”Hi，webpack 编译器，当你发现任何后缀为.txt 的文件时，请使用 raw-loader 先转换一下，然后再把转换后的内容添加到打包文件中。“
Plugins
Loaders 是用来转换某些类型的模块，而插件可以做更广泛的工作，例如压缩、优化程序，甚至改变环境变量。
想使用一个插件，只需要通过 require() 这个插件，然后在 plugins 数组中添加这个插件。大多数的插件，都是支持修改配置的。例如：
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 文件，这个文件就是你的应用程序。在其中已经自动引用好了打包的文件。
Mode
通过设置 mode 属性，可以启动 webpack 内置的优化。你可以指定 development、production、none，分别对应着不同的环境。默认的是 production。例如：
webpack.config.js
module.exports = {
mode: ‘production’
};
Browser Compatibility
webpack 支持所有基于 ES5 的浏览器，但是 IE8 及以下是不支持的。因为 webpack 需要 import() 和 require()。如果需要支持老版本浏览器，可以使用 loader 解决。
以上就是 webpack 的核心概念。下一篇笔记整理 webpack 官方文档的指南手册，敬请关注。
（未完）
