webpack-dev-server 配置

webpack.config.js 配置

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var AssetsPlugin = require('assets-webpack-plugin');
var path = require("path");
var umdREquirePlugin = require("umd-require-webpack-plugin");
var MoveToParentMergingPlugin = require('move-to-parent-merging-webpack-plugin');
var hotModuleReplacementPlugin = require("webpack/lib/HotModuleReplacementPlugin");
var webpack = require("webpack");

var isDevServer = process.argv[1].indexOf('webpack-dev-server') !== -1;

var devServer = {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
};

var entry = require("./entry-2");
var modulesEntry = require("./modules/entry");
for (var key in modulesEntry) {
    entry[key] = modulesEntry[key];
}

var needCsshint = process.argv.indexOf('--csshint') !== -1;
var config = {
    // The standard entry point and output config
    entry: entry,
    output: {
        path: path.join(__dirname, "assets2"), //path.join(__dirname, "assets", "[hash]"),
        //publicPath: "//s3-us-west-1.amazonaws.com/chime-static-cloud/site/assets/",
        publicPath: "/static/new-template/",
        filename: "[name].js",
        chunkFilename: "bundle-[id].js"
    },
    /*
        entry: "./entry.js",
        output: {
            path: __dirname,
            filename: "bundle.js"
        },
    */
    module: {
        loaders: [
            // Extract css files
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", `css-loader${needCsshint ? '!csslint-loader' : ''}!autoprefixer-loader`)
            },
            // Optionally extract less files
            // or any other compile-to-css language
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", `css-loader${needCsshint ? '!csslint-loader' : ''}!autoprefixer-loader!less-loader`)
            }, {
                test: /\.(sass|scss)/,
                loader: ExtractTextPlugin.extract("style-loader", `css-loader${needCsshint ? '!csslint-loader' : ''}!autoprefixer-loader!sass-loader?outputStyle=expanded`)
            },
            // You could also use other loaders the same way. I. e. the autoprefixer-loader
            {
                test: /\.woff2$/,
                loader: 'url-loader?limit=1000000&name=build/[name].[ext]'
            }, {
                test: /\.(png|jpg|svg|gif)$/i,
                loaders :[
                   'url-loader?name=build/[name].[ext]',
                   'image-webpack'
                ]
            }, {
                test: /\.tpl\.html$/,
                loader: 'html-template-loader'
            }, {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules|lib/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },

    // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
    plugins: [
        new ExtractTextPlugin("[name].css"),
        new CommonsChunkPlugin({
            name: "search-app.chunk",
            chunks: isDevServer ? [] : ["search-app-init", "template-home", "listing-detail", "search-map"]
        }),
        new CommonsChunkPlugin({
            name: "common-app.chunk",
            //chunks: isDevServer ? [] : entryArray

            chunks: isDevServer ? [] : ["app-init","listing-detail","sell","blog","sell-report","neigh","nbhd-detail","blog-detail","search-map","profile","template-home","contact","template-evaluation","evaluation-step1","evaluation-step1-new","evaluation-step2","evaluation-step2-new","evaluation-step3","template-about","template-listing-feature","template-listing-sold", "search-app.chunk"]
        }),
        //new CommonsChunkPlugin("search-app.chunk.js", ["search-app", "home", "listing-detail"]),
        new AssetsPlugin({filename: './version-control/source-map-test-2.json', prettyPrint: true}),

        new MoveToParentMergingPlugin(),
        new umdREquirePlugin(),
        new hotModuleReplacementPlugin(),
        //new webpack.optimize.UglifyJsPlugin()
    ],

    resolve: {
        modulesDirectories: ['.', 'node_modules']
    },

    resolveLoader: {
        modulesDirectories: ['.', 'node_modules']
    },
    externals:{
        "jquery":"jQuery",
        "react" : "React",
        "react-dom" :"ReactDOM"
    },

    devServer: isDevServer ? devServer : "",
};

//运行`node js-exclude.js js,new-template/js "js,jsx"`会生成最新的.jsexclude文件
if(process.argv.indexOf('--jshint') !== -1){
    var jshint = JSON.parse(require('fs').readFileSync('./.jshintrc').toString().replace(/\/\/[^\r\n]+/g, ''));
    var jsExcludes = require('fs').readFileSync('./.jsexclude').toString().split(/\r\n|\r|\n/).map(function(item){
        return path.normalize(__dirname + '/' + item);
    });
    config.module.preLoaders = [{
        test: /.js$/,
        exclude: function(file){
            return jsExcludes.indexOf(file) !== -1 || /[\/\\]node_modules[\/\\]/.test(file) || !/[\/\\]site[\/\\]/.test(file)
        },
        loader: "jshint-loader"
    }];
    config.jshint = jshint;
}
//运行`node js-exclude.js css,sass,jsp/custom-style,new-template/sass "css,scss,less"`会生成最新的.cssexclude文件
if(needCsshint){
    var cssExcludes = require('fs').readFileSync('./.cssexclude').toString().split(/\r\n|\r|\n/).map(function(item){
        return path.normalize(__dirname + '/' + item);
    });

    config.csslint = {
        rules: {
            // 'box-model': 1,
            'display-property-grouping': 1,
            // 'duplicate-properties': 1,
            'empty-rules': 1,
            'known-properties': 1,
            'ids': 1,
            'multi-rules-newline': 1,
            'rule-name': 1
        },
        exclude: function(file){
            return cssExcludes.indexOf(file) !== -1 || /[\/\\]node_modules[\/\\]/.test(file) || !/[\/\\]site[\/\\]/.test(file)
        },
    };
}

module.exports = config;

webpack-dev-server 配置

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");

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

  contentBase: "/Users/yincheng/code/homethy-static/site/",
  // 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:9090"
  },
*/

  // 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: "bundle.js",
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
  publicPath: "/site/",
  headers: { "X-Custom-Header": "yes" },
  stats: { colors: true }
});
server.listen(8080, "localhost", function() {});