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のフラグメントIが実行
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")]
}
};
：
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を持っていますそれによってnpm実行ビルド。それは、アプリケーションディレクトリ内のファイルを生成します。しかし、ブラウザでindex.htmlを開くと、ページは空です。 Firefoxのインスペクタで私がコメントを持っている：反応-空：1
は、どのように私は、サーバーなしでブラウザにそれを使用する私のプロジェクトをビルドするためにWebPACKのを使用することができますか？