本人微信民众号：
前端修炼之路，迎接关注。
之前用过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官方文档的指南手册，敬请关注。
（待续）
相干文章
