1
我有网站开发使用ES6，反应和反应路由器的webpack配置。它使用热重载和路由的开发人员服务器。webpack生产配置（反应，es6）
/config/webpack.dev：
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.join(__dirname, '..', 'app');
module.exports = {
debug: true,
devtool: 'eval',
entry: ['webpack-hot-middleware/client', './app/index.js'],
module: {
preLoaders: [{
test: /\.js?$/,
loaders: ["babel-loader", "eslint-loader"],
exclude: /node_modules/,
include: APP_DIR
}],
loaders: [
{test: /\.js?$/, loaders: ['react-hot', 'babel'], include: APP_DIR},
{
test: /\.scss$/, include: APP_DIR,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
{
test: /\.css$/, include: APP_DIR,
loader: "style!css!autoprefixer?browsers=last 2 version!"
},
{test: /\.(jpe?g|png|gif|svg)$/i, loaders: ['url?limit=8192', 'img']},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"}
]
},
output: {
filename: 'app.js',
path: path.join(__dirname, '..', 'build'),
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
root: [path.resolve('../app')],
extensions: ['', '.jsx', '.js']
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./app")]
}
};
我跑由NPM建设启动。
...
scripts": {
"build:webpack": "NODE_ENV=production webpack --config config/webpack.prod.js",
"clean": "rimraf build",
"start": "node dev_server.js"
}
...
dev_server.js：我的package.json的片段
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./config/webpack.dev');
var app = express();
var compiler = webpack(config);
var port = process.env.PORT || 3000;
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static(path.join(__dirname, '..', 'static')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(port, 'localhost', err => {
if (err) {
console.log(err);
return;
}
console.log(`Listening at http://localhost:${port}`);
});
我也有/config/webpack.prod：
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin');
var APP_DIR = path.join(__dirname, '..', 'app');
var projectRootPath = path.resolve(__dirname, '../');
var assetsPath = path.resolve(projectRootPath, './build');
module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, '..'),
entry: './app/index.js',
module: {
loaders: [
{
test: /\.js?$/,
loaders: ['babel'],
include: APP_DIR
},
{
test: /\.scss$/, include: APP_DIR,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
{
test: /\.css$/, include: APP_DIR,
loader: "style!css!autoprefixer?browsers=last 2 version!"
},
{test: /\.(jpe?g|png|gif|svg)$/i, loaders: ['url?limit=8192', 'img']},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}]
},
output: {
path: assetsPath,
filename: 'app.js',
publicPath: '/build/'
},
plugins: [
new CleanPlugin([assetsPath], { root: projectRootPath }),
new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
progress: true,
resolve: {
root: [path.resolve('../app')],
extensions: ['', '.jsx', '.js']
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./app")]
}
};
我跑它由npm run build。它在app目录中生成文件。但是当我在浏览器中打开index.html时，页面是空的。在Firefox检查我有意见：反应空：1
如何使用的WebPack建立我的项目使用它的浏览器，而服务器？