每次要编译代码时,手动运行npm run build特别麻烦。
webpack中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码:
1.webpack's Watch Mode(观察模式)
2.webpack-dev-server(提供一个服务器)
3.webpack-dev-middleware(是一个容器(wrapper),它可以把 webpack 处理后的文件传递给一个服务器(server)。 )
webpack's Watch Mode(观察模式)
上面是官方原话,没有看懂就先来看一个栗子:
首先在package.json中添加一个npm script脚本:
=================以下内容更新于2018.9.20======================
拖了将近一个月了,妈卖批的~~~
======================================================
"script": {
...,
"watch": "webpack –watch",
...
}
现在我们就可以在命令行中运行npm run watch启动观察模式,然后打开之前创建的index.html文件,报错:
这是因为之前为了检测souce map而设置的错误,我们把它去掉就好。
然后我们在src中的入口文件(index.js)文件中添加一句“console.log('watch mode')”,保存,会发现系统自动帮我们重新编译了(说明我们的配置生效了),重新刷新页面则会看到如下:
控制台上则多出了一句watch mode。
观察模式虽然能够达到自动编译代码的效果,但是其有一个缺点,就是只能帮我们自动重新编译,但不会帮我们重新刷新浏览器。如果想要在重新编译代码的同时刷新浏览器,则可以尝试使用webpack-dev-server。
另外,在执行watch mode后,会看到webpack编译代码却不会退出命令行,这是因为script脚本还在观察文件。
使用webpack-dev-server
webpack-dev-server提供一个简单的web服务器,并且能够实时重新加载(living reloading)。
首先我们需要安装相应的包:npm install –save-dev webpack-dev-server
然后在webpack.config.js中添加devServer选项:
module.exports = {
...,
devServer: {
contentBase: './dist'
},
...
}
以上的配置使得webpack-dev-server将在localhost:8080下建立服务,将dist目录下的文件,作为可访问文件。
最后再在package.json文件中添加script脚本:
"script": {
...,
"start": "webpack-dev-server --open",
...
}
现在,通过在命令行中运行npm start(注意这里是直接用npm start,一般我们都是使用npm run start,webpack-dev-server比较特殊,我们还是使用通用的npm run start以免出错),就会看到浏览器自动加载页面。如果现在修改和保存任意源文件,web服务器就会自动重新加载编译后的代码。
使用webpack-dev-middleware
webpack-dev-middleware 是一个容器(wrapper),它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它,同时,它也可以作为一个单独的包来使用,以便进行更多自定义设置来实现更多的需求。
接下来是一个webpack-dev-middleware配合express server的示例。
首先安装express和webpack-dev-middleware包:
npm install –save-dev express webpack-dev-middleware
接下来对webpack配置文件做一些调整,以确保中间件(middleware)功能能够正确启用:
webpack.config.js:
output:{
...,
publicPath: '/'
}
publicPath也会在服务器脚本用到,以确保文件资源能够在http://localhost:3000下正确访问,
我们稍后再设置端口号。下一步就是设置我们自定义的 express 服务:
项目根目录下我们添加一个server.js文件(server.js):
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
现在添加一个npm script:
"script": {
...,
"server": "node server.js",
...
}