现代Web开发系列教程_05

...
var isProduction = (process.env.NODE_ENV === 'production');
...

...
var ExtractTextPlugin = require('extract-text-webpack-plugin');
...
var plugins_options = [
  ...
  new ExtractTextPlugin('css/[name].css', {allChunks: true}),
  ...
];

var loaders = [
  ...
  {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader" + (isProduction ? '' : '?sourceMap') + "!postcss-loader")
  },{
      test: /\.less$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader" + (isProduction ? '' : '?sourceMap') + "!postcss-loader!less-loader" + (isProduction ? '' : '?sourceMap'))
  }
  ...
];

var webpackConfig = {
    ...
    module: {
        ...
        postcss: function () {
            return [autoprefixer];
        }
    }
};

if(!isProduction){
    plugins_options.push(new webpack.SourceMapDevToolPlugin({
        test:      /\.(js|css|less)($|\?)/i,
        filename: '[file].map'
    }));
}

if(isProduction){
    plugins_options.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        output: {
            comments: false
        }
    }));
    plugins_options.push(new webpack.optimize.OccurenceOrderPlugin());
}

if(!isProduction){
    plugins_options.push(new webpack.HotModuleReplacementPlugin());
}

if(!isProduction){
    entries.webpack_dev_client = 'webpack-dev-server/client?http://0.0.0.0:5000';
    entries.webpack_hot_dev_server = 'webpack/hot/only-dev-server';
}

var devServer_options = {
        host : '0.0.0.0',
        port: 5000,
        contentBase: ".",
        progress: true,
        hot: true,
        inline: true,
        stats: { colors: true },
        noInfo: true,
        historyApiFallback: true
};

var webpackConfig = {
    ...
    devServer: devServer_options,
    ...
};

var loaders = [
  ...
  {
      test: /\.(js|jsx)$/,
      exclude: [/node_modules/], // exclude any and all files in the node_modules folder
      loaders: ['babel-loader', 'eslint-loader', 'strict-loader']
  }
  ...
];

npm install webpack-dev-server --global
npm install webpack-dev-server extract-text-webpack-plugin eslint-loader eslint strict-loader eslint-plugin-react babel-eslint style-loader css-loader postcss-loader postcss less-loader less autoprefixer file-loader url-loader img-loader --save-dev

"scripts": {
  "serve-dev": "./node_modules/.bin/webpack-dev-server --progress",
  "build-prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress"
}