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"]