Webpack的基础概念很简单

why this ?

对于我来说webpack始终是学习路上遇到的一颗难以跨越的坎,看着create-react-app或者vue-cli脚手架生成的webpack.config.js文件都会望而却步,深知webpack是个学习曲线非常高的一个知识区块,分析其原因主要还是由以下几点:

  • 配置选项复杂
  • 更新迭代快
  • 插件或者loader之间会产生冲突
  • 脚手架包含webpack配置,懒得配

我觉得…主要是由第四点造成的,被脚手架惯坏了,自己都不愿意动手,想着反正怎么配都不如脚手架配的那么完美,那就不配吧。。。

知道前段时间,新的需求需要添加一些webpack的plugins,结果各种倒腾都没解决,自愧无知,主要原因还是对webpack的不熟悉,连一些很基础的插件、机制都不了解,还敢号称自己是前端工程师?

基础的概念

本系列博客是基于webpack4.x版本来分析,或许不久后又会推出5.x…,没办法啊,学不动都是假的,与其抱怨版本更新迭代快,还不如期待新版本的技术带来了哪些改进与新功能。

主要结构

一个最简单的webpack.config主要是由以下结构组成:

1
2
3
4
5
6
7
8
9
10
module.exports = {
entry: '',
output: {},
plugins: {},
module: {
rules: [
{ test: /\.jsx?$/, loader: 'babel-loader' }
]
}
};

下面我将简述其几大部分的概念以及作用

entry

webpack是个打包工具,它需要一个或多个很明确的打包入口,webpack会根据这个入口,找到所有被引用的模块,将它们汇集成一个bundle文件:

1
2
3
4
5
module.export = (event, argv) => {
return {
entry: './src/index.js'
}
}

以上的意思就是入口在webpack.config所在目录下的./src/index.js中。

output

output是指明webpack打包完成后的文件存储在哪个位置,以及如何命名这些文件,默认值是./dist

1
2
3
4
5
6
7
8
9
module.export = (event, argv) => {
return {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js' // js文件的名称与位置
}
}
}

注意,path是指打包资源存放处,而filename只是单独指出js文件的位置以及文件名。

plugins

plugins做的事情就比较杂了,他没有特定的功能,包括打包压缩,打包优化,全局环境变量设置等等等…,plugins的功能非常强大,可以用来处理各种繁杂的任务,以实现我们对打包的各种特殊的要求:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.export = (event, argv) => {
return {
...
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
})
]
}
}

我们要注意,插件因为是来自各方开发者开发的,所以一些非webpack自带的插件是要手动安装的,如上两个插件,CleanWebpackPlugin这个插件是当执行build的时候。自动删除webpack.config.js同级目录下的dist文件夹,而HtmlWebpackPlugin的功能就复杂许多,当我们指定html模版时,HtmlWebpackPlugin会根据我们的html模版,生成打包项目中的index.html入口页面,并且自动地将打包js文件引入到html中。

module(loader)

因为webpack本身指支持打包js文件,但是如果要打包css文件的话,就需要loader来进行转义了,为了更好地规划各种module,将每种不同类型文件分开处理,即test为指定文件类型。loader为转义这类文件需要用到什么loader:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.export = (event, argv) => {
return {
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[hash:6].[ext]',
outputPath: 'images/',
publicPath: '../images'
}
}
]
}
]
}
}
}

上面的配置是指当webpack遇到jsx或者png|jpg|gif|jpeg|svg这些类别的文件时,使用url-loader来进行处理,我们可以对options进行配置,limit是表示当文件小于1024b的时候,自动转化为base64格式,name是表示文件打包后的命名,outputPath是指打包后文件的存放位置,publicPath是指当其他模块引用这些文件时,在路径最前面加上../images以组成正确的引用路径。

这几大结构是webpack最基础的配置,虽然webpack说是说开箱即用,但是它往往不是那么智能,要想配出自己想要的打包工具,还得自己属性各种配置的作用,下面我们将配置一个满足最基础开发的规则

last

我们理清楚了webpack最基础的概念,理解了各个结构的“职能”,下一步,我将会讲解如何从零配置一个“基本能用”的webpack,请关注我后续的博客~

Work bears witness who does well. :)