我最终要做的是,我使用了两种不同的配置,一种用于使用webpack将服务器内容打包在一起,另一种用于将所有浏览器内容打包在一起,并且还运行webpack
dev服务器进行热重装。
*webpack.node.config.js
现在, *服务器Webpack配置 又看起来像这样:
var webpack = require('webpack');var path = require('path');var fs = require('fs');var nodeModules = {};// note the path.resolve(__dirname, ...) part// without it, eslint-import-resolver-webpack fails// since eslint might be invoked with different cwdfs.readdirSync(path.resolve(__dirname, 'node_modules')) .filter(x => ['.bin'].indexOf(x) === -1) .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });// es5 style alternative// fs.readdirSync(path.resolve(__dirname, 'node_modules'))// .filter(function(x) {// return ['.bin'].indexOf(x) === -1;// })// .forEach(function(mod) {// nodeModules[mod] = 'commonjs ' + mod; // });module.exports ={ // The configuration for the server-side rendering name: 'server', target: 'node', entry: './app/server/serverEntryPrototype.js', output: { path: './bin/', publicPath: 'bin/', filename: 'serverEntryPoint.js' }, externals: nodeModules, module: { loaders: [ { test: /.js$/, loaders: [ // 'imports?document=this', // 'react-hot', 'babel-loader' //,'jsx-loader' ] }, { test: /.json$/, loader: 'json-loader' }, ] }, plugins: [ // new webpack.NormalModuleReplacementPlugin("^(react-bootstrap-modal)$", "^(react)$") // new webpack.IgnorePlugin(new RegExp("^(react-bootstrap-modal)$")) // new webpack.IgnorePlugin(/^./locale$/, /moment$/) ]};浏览器的WebPack配置 又名
webpack.browser.config.js现在看起来是这样的:
var webpack = require('webpack');var path = require('path');var buildPath = path.resolve(__dirname, 'assets');var fs = require('fs');var commonLoaders = [ { test: /.js$/, loaders: [ 'react-hot', 'babel-loader' //,'jsx-loader' ] }];module.exports ={ // Makes sure errors in console map to the correct file // and line number name: 'browser', devtool: 'eval', entry: [ //'./bin/www.js', './app/index.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8081' // WebpackDevServer host and port ], output: { path: buildPath, filename: '[name].js', // Everything related to Webpack should go through a build path, // localhost:3000/build. That makes proxying easier to handle publicPath: 'http://localhost:8081/assets/' }, extensions: [ '', '.jsx', '.js', '.json', '.html', '.css', '.styl', '.scss', '.sass' ], module: { loaders: [ // Compile es6 to js. { test: /app/.*.jsx?$/, loaders: [ 'react-hot', 'babel-loader' ] }, ///app/.*.json$/ { test: /.json$/, loader: 'json-loader' }, // Styles { test: /.css$/, loader: 'style-loader!css-loader' }, { test: /.s(a|c)ss$/, loader: 'style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss!sass' }, // Fonts { test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' }, { test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/, loader: 'file-loader' } //{ test: /.png$/, loader: 'url-loader?limit=100000' }, //{ test: /.jpg$/, loader: 'file-loader' } ], plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] }, postcss: [ require('autoprefixer-core') ], devtool: 'source-map'};


