webpack-dev-server 使用方法

1、使用命令行形式

第一步：安装webpack-dev-server node模块 npm install webpack-dev-server --save-dev

第二步：在webpack.config.js中添加

devServer:{
historyApiFallback:true,
hot:true,
inline:true,
progress:true,
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
new webpack.DefinePlugin({
'process.env.NODE.ENV':"development"
}),
new webpack.HotModuleReplacementPlugin(),
]

第三步：package.json文件的script中添加:["start": "webpack-dev-server --inline --hot --port 8088"]

第四步: 使用npm start 运行

2、使用node API的形式

第一步：安装webpack-dev-server node模块 npm install webpack-dev-server --save-dev

第二步：在webpack.config.js中的entry中添加

entry: [
'webpack-dev-server/client?http://localhost:8088/',
'webpack/hot/dev-server',
'./src/static/js/app.js'
],

第三步：在plugins中添加

new webpack.DefinePlugin({
'process.env.NODE.ENV':"development"
}),
new webpack.HotModuleReplacementPlugin(),

第四步：新建webpack-dev-server.js文件，与webpack.config.js同级目录

var config = require("./webpack.config.js");
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

//config.entry.app.unshift("webpack-dev-server/client?http://localhost:8088/");

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
// webpack-dev-server options

//contentBase: "dist/",
// Can also be an array, or: contentBase: "http://localhost/",

hot: true,
// Enable special support for Hot Module Replacement
// Page is no longer updated, but a "webpackHotUpdate" message is send to the content
// Use "webpack/hot/dev-server" as additional module in your entry point
// Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does.

// Set this as true if you want to access dev server from arbitrary url.
// This is handy if you are using a html5 router.
historyApiFallback: false,

// Set this if you want to enable gzip compression for assets
compress: true,

// Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
// Use "**" to proxy all paths to the specified server.
// This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
// and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
/*proxy: {
"**": "http://localhost:8088"
},*/

setup: function(app) {
// Here you can access the Express app object and add your own custom middleware to it.
// For example, to define custom handlers for some paths:
// app.get('/some/path', function(req, res) {
//   res.json({ custom: 'response' });
// });
},

// pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
staticOptions: {
},

// webpack-dev-middleware options
quiet: false,
noInfo: false,
lazy: true,
filename: "app.bundle.js",
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
// It's a required option.
publicPath: "/assets/",
headers: { "X-Custom-Header": "yes" },
stats: { colors: true }
});
server.listen(8088, "localhost", function() {});
// server.close();

第五步：在index.html中添加

<script src="http://localhost:8088/webpack-dev-server.js"></script>

第六步：运行 node webpack-dev-server.js

              或者

             将此命令添加到package.json文件的script中：["start": "node webpack-dev-server.js"]