咱们每次修改代码以后，若是想要在浏览器中看到变化，都先要手动编译代码，这样未免有些麻烦javascript
在 webpack 中，配置某些选项能够帮助咱们在代码发生变化以后自动编译代码html
首先咱们搭建一个简单的项目，感觉一下在不使用自动编译以前项目开发的状态前端
建立一个空文件夹 Demo，做为项目的根目录，在该目录下运行以下命令安装项目所需依赖java
> # 建立 package.json 文件 > npm init -y > # 安装 webpack > npm install --save-dev webpack > npm install --save-dev webpack-cli > # 安装 lodash > npm install --save lodash
而后咱们在根目录下建立 dist 和 src 目录，并在相应的目录下建立相应的文件，最终的目录结构以下node
Demo
- package.json
- package-lock.json
- webpack.config.js
+ node_modules
+ src
- index.js
+ dist
- index.html
webpack.config.js 文件内容，指定 webpack 的一些基本配置webpack
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
package.json 文件内容，添加打包命令 npm run buildweb
{
"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文件shell
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
/src/index.js 文件内容，建立一个 div，并将其做为 body 的子节点npm
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
至此，一个粗糙的 Demo 就搭建完成啦，运行构建命令便可完成打包json
> 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 才能使改动生效
这样很不方便，特别是对于前端的代码，有时候的确须要反反复复修改和编译十几回乃至几十次
那么，有没有一种方法可使改动以后的代码（ 保存以后 ）自动编译呢？答案是确定的
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
以后修改代码，保存文件，应该可以看到浏览器自动刷新，而且展现修改以后的结果
【 阅读更多 webpack 系列文章，请看 webpack学习笔记 】