本人微信公众号:前端修炼之路,欢迎关注。
之前用过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官方文档的指南手册,敬请关注。
(待续)
相关文章
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。