在开始之前,确保大家已经安装了node和npm/yarn环境。
首先我们新建一个目录用来初始化一个新的项目
使用npm:
使用yarn:
上面的选项大家可以自己填入,也可直接回车快速跳过完成初始化,完成后会生成package.json文件
接下来我们在局部安装webpack:
yarn add webpack
如果你习惯使用npm,那么就使用命令npm install 进行安装。
webpack安装完成后,我们还要安装一个辅助的依赖:webpack-dev-server,
它可以在开发环境为我们提供热更新,接口代理等等很实用的服务。
yarn add webpack-dev-server
关于yarn的add命令使用大家可以去查阅官方文档:
https://yarnpkg.com/zh-Hans/docs/cli/add
好了,我们先看下安装完成后的package.json文件:
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.28.2",
"webpack-dev-server": "^3.1.14"
}
}
到这一步,我们就需要了解webpack的一些基础知识了。
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle。
webpack的核心概念有以下四点,这些大家必须清楚:
入口(entry)
输出(output)
loader
插件(plugins)
入口(entry)
入口起点指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始,webpack 会找出有哪些模块和 library 是入口起点(直接和间接)依赖的。
默认值是 ./src/index.js,也可以通过在 webpack 配置中配置 entry 属性,来指定一个不同的入口起点(或者也可以指定多个入口起点)。
出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,主输出文件默认为 ./dist/main.js,其他生成文件的默认输出目录是 ./dist。
你可以通过在配置中指定一个 output 字段,来配置这些处理过程。
loader
作为开箱即用的自带特性,webpack 自身只支持 JavaScript。而 loader 能够让 webpack 处理那些非 JavaScript 文件,并且先将它们转换为有效 模块,然后添加到依赖图中,这样就可以提供给应用程序使用。
webpack 的配置中 loader 有两个特征:
test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性,表示进行转换时,应该使用哪个 loader。
插件(plugins)
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务,插件的范围包括:打包优化、资源管理和注入环境变量。
通常,我们的项目还需要继续扩展webpack,为此我们可以在项目根目录下创建一个 webpack.config.js 文件,webpack 会自动使用它。
这里给大家一个链接里面有详细的配置说明:
https://webpack.docschina.org/configuration
好了,如果看了上面的链接还有兴趣往下看的我们继续。
归根结底,webpack本质上就是一个js配置文件,那么我们首先初始化这个文件的内容:
module.exports={
}
然后我们在package.json里增加一个快速启动webpack-dev-server的脚本:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --config webpack.config.js"
},
此时,我们就可以使用npm/yarn run dev命令了。前面提到过,核心配置文件入口和出口这两个选项是必须的,此时我们可以正常运行命令,但是结果是错误的。
提示我们需要安装webpack-cli:
yarn add webpack-cli
接下来我们创建一个main.js作入口文件,并在webpack.config.js中做相应的配置:
const path = require('path')
module.exports={
entry:{
main: './main'
},
output:{
path: path.join(__dirname,'./dist'), //打包后文件的输出目录
publicPath: '/dist/', //资源文件引用的目录
filename:'main.js' //打包后的文件名称
}
}
此时我们运行yarn run dev:
此时在浏览器会打开一个新的页面:
很显然,这里我们缺少页面入口html文件。
启动命令后,页面执行的url是:
localhost:8080
后面并没有具体的页面信息,那么webpack-dev-server到底会使用哪个页面作为起始页面呢,这点我们不得而知,只能去查看源代码试着找到一些线索。
在我们的工程目录下面,可以找到我们安装的依赖:
我们找到webpack-dev-server.js一探究竟:
大家可以看到:
也就是说webpack-dev-server的内部服务器处理是通过Server这个东西来实现的,我们继续找Server,在38行我们找到了:
好了,我们接着去看看Server内部的实现,我们会发现其内部是采用Express作为服务器的实现:
当我们启动程序后,会执行下面的代码,这里我们可以找到我们想要的:
我们进入这个文件我们会找到如下的一段代码:
return new Promise(((resolve) => {
handleRequest(context, filename, processRequest, req);
function processRequest() {
try {
let stat = context.fs.statSync(filename);
if (!stat.isFile()) {
if (stat.isDirectory()) {
let { index } = context.options;
if (index === undefined || index === true) {
index = 'index.html';
} else if (!index) {
throw new DevMiddlewareError('next');
}
filename = path.posix.join(filename, index);
stat = context.fs.statSync(filename);
if (!stat.isFile()) {
throw new DevMiddlewareError('next');
}
} else {
throw new DevMiddlewareError('next');
}
}
} catch (e) {
return resolve(goNext());
}
在这我们找到了我们想要的index.html从哪里来,在其中我们输出一些log:
let filename = getFilenameFromUrl(context.options.publicPath, context.compiler, req.url);
console.log(req.url,filename, '1111')
大家会看到输出:
这是我们期望看到的,因为localhost:8080后面没有跟任何路径。
if (index === undefined || index === true) {
index = 'index.html';
} else if (!index) {
throw new DevMiddlewareError('next');
}
从这几行代码可以看出,如果如果HTTP请求路径/后没有子路径,则默认返回一个硬编码的index.html,好了大概就是这样子的,具体的我们在自己研究研究。
既然知道原因,我们创建一个index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 基础</title>
</head>
<body>
<div>
webpack 基础
</div>
</body>
</html>
再次运行:
ok,大体的流程我们就清楚了。
我们在main.js中添加一句代码修改显示的文字:
document.getElementById('app').innerHTML = '我改啊改'
然后在index.html中引入打包后的main.js:
<script type="text/javascript" src="/dist/main.js"></script>
最终浏览器编译后的文件如下: