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() {});