webpack自动编译

每次编译代码时，手动运行 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.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。

猜你喜欢