每次编译代码时,手动运行 npm run build 会显得很麻烦。
webpack 提供几种可选方式,帮助你在代码发生变化后自动编译代码:
方式一:webpack watch mode(webpack 观察模式)
watch mode(观察模式) :
你可以指示 webpack “watch” 依赖图中所有文件的更改。如果其中一个文件被更新,代码将被重新编译,所以你不必再去手动运行整个构建。
package.json
{
“name”: “development”,
“version”: “1.0.0”,
“description”: “”,
“main”: “webpack.config.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
+ “watch”: “webpack --watch”,
“build”: “webpack”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“clean-webpack-plugin”: “^0.1.16”,
“css-loader”: “^0.28.4”,
“csv-loader”: “^2.1.1”,
“file-loader”: “^0.11.2”,
“html-webpack-plugin”: “^2.29.0”,
“style-loader”: “^0.18.2”,
“webpack”: “^3.0.0”,
“xml-loader”: “^1.2.1”
}
}
现在,你可以在命令行中运行 npm run watch,然后就会看到 webpack 是如何编译代码。
然而,你会发现并没有退出命令行。这是因为此 script 当前还在 watch 你的文件。
唯一的缺点是,为了看到修改后的实际效果,你需要刷新浏览器。如果能够自动刷新浏览器就更好了,
因此接下来我们会尝试通过 webpack-dev-server 实现此功能。
方式二:webpack-dev-server
package.json
{
“name”: “development”,
“version”: “1.0.0”,
“description”: “”,
“main”: “webpack.config.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“watch”: “webpack --watch”,
-
"start": "webpack-dev-server --open", "build": "webpack"
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“clean-webpack-plugin”: “^0.1.16”,
“css-loader”: “^0.28.4”,
“csv-loader”: “^2.1.1”,
“file-loader”: “^0.11.2”,
“html-webpack-plugin”: “^2.29.0”,
“style-loader”: “^0.18.2”,
“webpack”: “^3.0.0”,
“xml-loader”: “^1.2.1”
}
}
现在,在命令行中运行 npm start,我们会看到浏览器自动加载页面。如果你更改任何源文件并保存它们,web server 将在编译代码后自动重新加载。试试看!
方式三:webpack-dev-middleware
webpack-dev-middleware 是一个封装器(wrapper),它可以把 webpack 处理过的文件发送到一个 server。
webpack-dev-server 在内部使用了它,然而它也可以作为一个单独的 package 来使用,以便根据需求进行更多自定义设置。
下面是一个 webpack-dev-middleware 配合 express server 的示例。
安装 express 和 webpack-dev-middleware:
npm install --save-dev express webpack-dev-middleware
webpack.config.js:
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);module.exports = { mode: 'development', entry: { app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map', devServer: { contentBase: './dist' }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: '管理输出' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), + publicPath: '/' } };
我们将会在 server 脚本使用 publicPath,以确保文件资源能够正确地 serve 在 http://localhost:3000 下,
稍后我们会指定 port number(端口号)。接下来是设置自定义 express server:
webpack-demo
|- package.json
|- webpack.config.js
+ |- server.js
|- /dist
|- /src
|- index.js
|- print.js
|- /node_modules
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);
// 告诉 express 使用 webpack-dev-middleware,
// 以及将 webpack.config.js 配置文件作为基础配置
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
// 将文件 serve 到 port 3000。
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
现在,添加一个 npm script,以使我们更方便地运行服务:
package.json
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
+ "server": "node server.js",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"express": "^4.15.3",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"webpack-dev-middleware": "^1.12.0",
"xml-loader": "^1.2.1"
}
}
**注意:**
使用自动编译代码时,可能会在保存文件时遇到一些问题。某些编辑器具有
"safe write(安全写入)" 功能,会影响重新编译。
在一些常见的编辑器中禁用此功能,查看以下列表:
Sublime Text 3:在用户首选项(user preferences)中添加 atomic_save: ‘false’。
JetBrains IDEs (e.g. WebStorm):在 Preferences > Appearance & Behavior > System Settings 中取消选中 “Use safe write”。
Vim:在设置(settings)中增加 :set backupcopy=yes。