【Webpack的使用指南 01】Webpack入门

时间:2024-01-07 11:09:14

使用Webpack有一段时间了,但是感觉之前学的用的都比较零散,所以在这里整理一下Webpack的使用知识,从入门到进阶。

创建项目

首先创建最简单的一个项目

npm init

得到以下项目结构:

【Webpack的使用指南 01】Webpack入门

安装Webpack

先来个全局的

npm i webpack -g

再安装项目中的

npm i webpack --save-dev

此时项目结构为,且注意到package.json中自动生成了对webpack的开发依赖:

【Webpack的使用指南 01】Webpack入门

Webpack的打包初体验

现在让我们用Webpack来打包文件,那么新建一个js文件如下:

【Webpack的使用指南 01】Webpack入门

然后执行命令

webpack ./src/app.js ./build/bundle.js

那么就会在根目录下生成一个build文件夹,里面会有一个bundle文件

【Webpack的使用指南 01】Webpack入门

可以查看bundle.js的js文件信息,里面的作用就是用了一个立即执行函数,然后将app.js的内容封装成一个函数,作为参数传进内部执行。这样就可以来分析处理依赖什么的了。

原理就是这个样子,具体的可以自己看一下底层代码就行,对于这种只打包一个文件的bundle.js,代码也很好看懂。

每次打包都这样输入一大串命令明显很烦,所以需要用到package.json的脚本功能,很简单,修改它为:

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "webpack的使用demo",
"main": "index.js",
"author": "韩子卢",
"license": "MIT",
"devDependencies": {
"webpack": "^3.10.0"
},
"scripts": {
"build": "webpack ./src/app.js ./build/bundle.js"
}
}

对比之前的文件内容,明白玩法就好了,然后我们如果再想打包,那么运行命令:

npm run build

也行,当然命令不一定要用build,把在package.json 里把build改为dota都行,此时运行的命令自然是:

npm run dota

这样做的好处是,简单方便,一些命令就不用记下来了,其次其他人很容易知道这个项目中如何进行打包。

Webpack命令的一些常用参数

参数 作用
-p 对打包的文件进行压缩
-d 提供source map,方便调式代码
--watch 监控源文件,如果源文件做了修改,那么立马生成新的打包文件

webpack的配置文件

一般使用webpack都不会直接用webpack命令来生成某个脚本,因为它还有些强大的功能不好在简单命令里面实现,这个时候就需要用到webpack的配置文件了。

此时在根目录下新增一个文件:

【Webpack的使用指南 01】Webpack入门

然后命令行运行:

webpack

此时webpack会自动检索根目录下的webpack.config.js文件,然后根据这个文件中的配置去打包文件。

接下来我们分析一下webpack.config.js的代码:

module.exports = {
entry: './src/app.js',
output: {
filename: './build/bundle.js'
}
};

module.exports为导出对象,webpack会直接读取这个导出对象来打包代码,所以我们将打包的配置直接赋值给这个对象。

entry代表入口,即打包的时候从哪个文件开始打包,

output代表输出配置,即打包后生成的文件配置,其中的filename代表文件名。

上面的打包配置可以简单理解为,从'./src/app.js'文件开始打包,生成一个文件名为bundle.js的文件,它的路径是'./build/bundle.js'。

这里我们也可以这么写:

module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
}
};

注意,这里的path代表文件的输出目录,当我们用了path之后,filename就直接写文件名,而不要再写路径了,因为新的路径是path来的,如果还按照原来的,会在build文件夹下再生成一个build文件夹。

此时看到配置中还出现了一个__dirname变量,这个变量我们也没赋值,放的是什么呢?

__dirname实际上是webpack在编译时自己内部加上的一个变量,它代表webpack.config.js这个文件在电脑中的绝对路径。

想到这么玩的好处了吗,比如利用在filename中加相对路径可以直接生成文件到电脑中的发布网站下面。

publicPath 代表资源引用的路径。

publicPath一般用于bulid时,比如我现在生成js文件,但是我们不是放在本地服务器,而是放在CDN的某个文件夹test中。

那么我们将publicPath赋值为CDN上test文件夹的路径,那么最后index里面引用的就是cdn上的文件了。

webpack的插件

webpack的功能强大有一部分的原因就是插件的功能多且强。

然而我们在使用插件前需要明白一点,我们使用的目的是为了解决问题,而不是为了使用而使用。

现在我们项目的问题是什么?

首先没有html,这个简单,直接新建一个html即可,不需要插件。

【Webpack的使用指南 01】Webpack入门

但是如果这样玩的话,每次生成的js文件名都是bundle.js,那么网站就会形成缓存,导致明明发布了也没有效果啊。

解决这个问题的办法是在js后面加版本号,比如bundle.v1_1_0.js,我们可以手工操作进行修改,但是总有忘记的时候,这样就会出错。

那么问题就这么产生了,解决这个问题的插件就是:html-webpack-plugin

接下来让我们来开始使用这个插件。

首先webpack内部没有集成这个插件,需要我们去安装:

npm i html-webpack-plugin --save-dev

然后删掉index.html,并修改webpack.config.js为:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};

此时运行

webpack

可以发现在我们的输出目录build下还生成了一个index.html,里面还自动引入了我们生成的的bundle.js。

【Webpack的使用指南 01】Webpack入门

可是这样并没有解决我们的问题,那么让我们来使用html-webpack-plugin的更多功能,修改webpack.config.js文件为:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Demo",
filename: 'demo.html',
minify: {
collapseWhitespace: true,
},
hash: true
})
]
};

生成后发现在输出目录生成的html文件名变味了demo.html,html的标题成了Webpack Demo,引用的js有了hash值,并且html还被压缩了,去掉了里面所有可折叠的空白元素。

这样就行了吗?

不够的,实际的开发过程中我们遇到html结构没有这么简单,会需要更多的html结构。

就比如我想在生成的html中引入一个bootstrap的css。

这又是一个新的问题,然而html-webpack-plugin的模板功能可以解决这个问题。

新建一个模板html文件template.html,

【Webpack的使用指南 01】Webpack入门

修改webpack.config.js为:

【Webpack的使用指南 01】Webpack入门

这样就会以index.html文件为模板生成最后的html文件,当然html-webpack-plugin还有更多的功能,这里就不细说了。