命令行
命令行方式是最简单的方式, 如果项目只是纯Web前端, 使用这种方式是最便捷的. 只需要在package.json文件中的scripts里面添加下面一行就可以了.
直接命令行:
webpack-dev-server --content-base=www --inline --watch --hot --progress --config webpack.config.js
通过 npm run dev 或 yarn run dev:
// package.json
"scripts": {
"dev": "webpack-dev-server --content-base=www --inline --watch --hot --progress --config webpack.config.js",
...
},
参数说明:
--content-base: 静态资源的目录, 为 output.path 设置的目录.
output: {
path: path.resolve(__dirname, 'dist'),
},
--watch: 监视模式, Web执行完打包后不退出, 一直监听文件变化, Ctrl + S后自动构建变化的模块, 及其依赖模块.
--hot: 开启模块热替换.
--progress: 显示进度
--config: 指定配置文件 webpack.config.js 为默认文件名.
Webpack API
API的方式需要对webpack.config.js配置文件进行修改, 增加HotModuleReplacementPlugin插件.
Webpack 1.x
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: path.join(__dirname, 'js'),
entry: [
'./index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080/',
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
publicPath: '/',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
};
Webpack 2.x
Webpack 2.x 需要一个额外配置 .babelrc, 增加 react-hot-loader/babel:
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-hot-loader/babel"
]
}
webpack.config.js 模块加载器的配置, 和Webpack 1.x是不同的:
rules: [
// Javascript模块加载器
{
test: /\.js|jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory : true,
presets: [
['es2015', {modules: false}]
],
// ES7
plugins: [
// 模块动态导入
'syntax-dynamic-import',
'transform-async-to-generator',
'transform-regenerator',
// 运行时转换
'transform-runtime'
]
}
}
},
中间件
需要编写一个Express服务器, 并且把 webpack-dev-middleware 集成到自己的服务器中. 多用于需要高度定制的场景, 实际上之前的webpack-dev-server就是使用的 webpack-dev-middleware 来实现的, 这里可以证明（
https://github.com/webpack/webpack-dev-server/blob/master/package.json#L25
）.
const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
const app = express();
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
// 启用热更
hot: true,
filename: 'bundle.js',
publicPath: '/assets/',
stats: {
colors: true,
},
// 路由需要的
historyApiFallback: true,
}));
app.use(webpackHotMiddleware(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000,
}));
app.get('/', function(req, res) {
res.send('
Hello World
