我们每次修改代码之后,如果想要在浏览器中看到变化,都先要手动编译代码,这样未免有些麻烦
在 webpack 中,配置某些选项可以帮助我们在代码发生变化之后自动编译代码
1、存在问题
首先我们搭建一个简单的项目,感受一下在不使用自动编译之前项目开发的状态
创建一个空文件夹 Demo
,作为项目的根目录,在该目录下运行如下命令安装项目所需依赖
> # 创建 package.json 文件
> npm init -y
> # 安装 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安装 lodash
> npm install --save lodash
然后我们在根目录下创建 dist
和 src
目录,并在相应的目录下创建相应的文件,最终的目录结构如下
Demo
- package.json
- package-lock.json
- webpack.config.js
+ node_modules
+ src
- index.js
+ dist
- index.html
webpack.config.js
文件内容,指定 webpack 的一些基本配置
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json
文件内容,添加打包命令 npm run build
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
/dist/index.html
文件内容,引入打包之后的 bundle.js
文件
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
/src/index.js
文件内容,创建一个 div
,并将其作为 body
的子节点
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
至此,一个粗糙的 Demo 就搭建完成啦,运行构建命令即可完成打包
> npm run build
这时用浏览器打开 /dist/index.html
文件,应该可以看到 Hello webpack
的文字
好了,现在假如我们要对项目作一点小小的修改,让屏幕上显示的文字变成 Hello World
很简单,对吧!只需要修改 /src/index.js
文件的一点内容就行
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// 将 webpack 改成 World 就好
element.innerHTML = _.join(['Hello', 'World'], ' ');
return element;
}
document.body.appendChild(component());
但是,这时候我们又要重新运行构建命令 npm run build
才能使改动生效
这样很不方便,特别是对于前端的代码,有时候的确需要反反复复修改和编译十几次乃至几十次
2、解决问题
那么,有没有一种方法可以使改动之后的代码( 保存之后 )自动编译呢?答案是肯定的
webpack 中有两种常见的方法实现这种效果
(1)watch mode
第一种方法是使用 watch mode,顾名思义,就是可以在观察到代码发生变化之后自动编译代码
我们可以通过 webpack 的命令行参数 --watch
指定使用,这样当代码发生变化后,webpack 会自动编译
> npx webpack --config webpack.config.js --watch
或者我们可以加上 npm script 脚本,方便以后使用,修改 package.json
文件如下
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "npx webpack --config webpack.config.js --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
好,开启观察模式
> npm run watch
现在修改代码,保存文件,刷新浏览器,应该就能看到修改之后的效果啦,唯一的缺点就是浏览器不会自动刷新
(2)webpack-dev-server
第二种方法是使用 webpack-dev-server,提供一个简单的 web 服务器,实时加载
首先,我们安装一下模块
> npm install --save-dev webpack-dev-server
然后在 webpack.config.js
文件写下相关配置
告诉 server 应该在 localhost:8080
下建立服务,然后将 dist
目录下的文件设置为可访问
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 开启开发服务器
devServer: {
contentBase: './dist'
}
};
也是添加一个 npm script 脚本,方便以后使用,修改 package.json
文件如下
{
"name": "Demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "webpack --config webpack.config.js --watch",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
好,现在开启开发服务器
> npm start
之后修改代码,保存文件,应该能够看到浏览器自动刷新,并且展示修改之后的结果