webpack 基本配置
var path = require('path')
module.exports = {
entry:path.resolve(__dirname,'src/app.js'),
output:{
path:path.resolve(__dirname,'public'),
filename:'bundle.js',
publicPath:'/assets/'
},
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','react','stage-0']
}
}
]
}
}
entry:要打包文件
output:打包文件位置
module:打包要加载的模块--presets用来解析ES6,React,ES7语法
publicPath:指定公共URL地址在浏览器输出文件的引用--如果，你用webpack-dev-server做开发调试服务器，那么bundle.js的地址就是http://localhost:8080/assets/bundle.js
自动刷新和热替换
在用webpack-dev-server进行开发时自动刷新和hot replace是一个非常棒的功能，仅仅只用在entry中添加两行配置即可：
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'src/app.js')
]
webpack-dev-server CLI
--content-base <file/directory/url/port>: 服务器根目录.
--quiet: 什么都不输出到控制台
--no-info: suppress boring information（忽略无用的信息）.
--colors: add some colors to the output（用颜色区分输出）.
--no-colors: don’t used colors in the output（不用颜色）.
--host <hostname/ip>: hostname or IP（主机名或ip）.
--port <number>: port(端口，默认为8080).
--inline: embed the webpack-dev-server runtime into the bundle.
--hot: adds the HotModuleReplacementPlugin and switch the server to hot mode.
Note: make sure you don’t add HotModuleReplacementPlugin twice.
(添加HotModuleReplacementPlugin插件，注意：不要添加两次)
--hot --inline also adds the webpack/hot/dev-server entry（在entry中加入webpack/hot/dev-server）.
--lazy: no watching, compiles on request (cannot be combined with --hot).
（不监测，不要和--hot一起使用）
--https: serves webpack-dev-server over HTTPS Protocol. Includes a self-signed certificate that is used when serving the requests.
可以通过配置文件使用CLI
var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var config = require('./webpack.config')
var compiler = webpack(
config
);
var server = new WebpackDevServer(compiler, {
// webpack-dev-server options
contentBase: "/path/to/directory",
// or: contentBase: "http://localhost/",
hot: true,
// 启用热替换
// 添加 "webpack/hot/dev-server" 在entry
// 注意: 不要添加再 `HotModuleReplacementPlugin` like the CLI option does.
// webpack-dev-middleware options
quiet: false,
noInfo: false,
lazy: true,
filename: "bundle.js",
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
publicPath: "/assets/",
headers: { "X-Custom-Header": "yes" },
stats: { colors: true },
});
server.listen(8080, "localhost", function() {});
Express React Hot Reloading配置
安装包
npm install --save-dev webpack-dev-middleware
npm install --save-dev webpack-hot-middleware
npm install --save-dev babel-plugin-react-transform
npm install --save-dev react-transform-hmr
配置babel(.babelrc)
{
"presets": ["react", "es2015"],
"env": {
"development": {
"plugins": [
["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]
]
}
}
}
server.js配置（express)
var express = require('express');
var webpack = require('webpack');
var path = require('path');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackHotMiddleware = require("webpack-hot-middleware");
var webpackConfig = require('../webpack.config');
var app = express();
var compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler));
app.use(webpackHotMiddleware(compiler));
app.use(express.static('src'));
app.listen(3000);
webpack.config配置
entry: [
'webpack-hot-middleware/client',
path.join(__dirname, 'src', 'App.js'),
],
启用内部插件
plugins: [
new webpack.optimize.OccurenceOrderPlugin(), // recommanded by webpack
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin() // recommanded by webpack
]