Справка по Webpack - добавление горячей загрузки и сопоставление источников в проект React/Node

Question

Я новичок в webpack. Я пытаюсь добавить React в простой проект Node, но я только что использовал React с предварительно настроенным сервером webpack dev, а не с другим сервером. Webpack запускает собственный сервер узлов, поэтому для меня возникает одна проблема.

Вот что мне нужна помощь с:

1. Как добавить горячую загрузку и отображение источника, если я использую Express?
2. Как добавить глобальный Bootstrap css из моей общей папки с webpack в этот проект (есть ли способ сделать это как то, как я это сделал с файлами js и html-webpack-plugin)?

Я попытался использовать сервер dev для веб-сервера, чтобы получить горячую загрузку, но я столкнулся с проблемой, когда у меня два конфликтующих сервера: webpack и app.js server.

Вот часть моих app.js файл

var app = module.exports = express(); 
 
app.use(bodyParser.json()); 
 
app.use(bodyParser.urlencoded({ extended: true })); 
 
app.use(express.static(path.join(__dirname, 'public'))); 
 

 
//API Routes 
 

 
// all other requests 
 
app.get('*', function(req, res) { 
 
    res.sendFile(path.join(__dirname, 'dist', 'index.html')); 
 
}); 
 

 
// Starting server 
 
http.createServer(app).listen(port);

.babelrc

{ 
 
    "presets": [ 
 
    "react", 
 
    "es2015", 
 
    "stage-0" 
 
    ] 
 
}

webpack.config.babel

import webpack from 'webpack' 
 

 
var HtmlWebpackPlugin = require('html-webpack-plugin') 
 
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
 
    template: __dirname + '/public/index.html', 
 
    filename: 'index.html', 
 
    inject: 'body' 
 
}) 
 

 
const base = { 
 
    entry: { 
 
    "jquery": __dirname + '/public/js/lib/jquery/jquery-2.0.3.min.js', 
 
    "bootstrap": __dirname + '/public/bootstrap/js/bootstrap.min.js', 
 
    "index": __dirname + '/app', 
 
    }, 
 
    output: { 
 
    path: __dirname + '/dist', 
 
    filename: '[name].js', 
 
    }, 
 
    module: { 
 
    loaders: [ 
 
     {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
 
     {test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'} 
 
    ] 
 
    }, 
 
} 
 

 
const developmentConfig = { 
 
    devtool: 'cheap-module-inline-source-map', 
 
    plugins: [HTMLWebpackPluginConfig] 
 
} 
 

 
export default Object.assign({}, base, developmentConfig)

Я попытался добавить new ExtractTextPlugin("dist/[name].css") плагинам и заменить мой CSS загрузчик с loader: ExtractTextPlugin.extract("style-loader", "css-loader"), но я до сих пор не в состоянии добавить загрузочный CSS или любой CSS, чтобы мое приложение.

Answer 1

Уведомление в файле webpack.config.babel у вас есть этот вывод:

output: { 
    path: __dirname + '/dist', 
    filename: '[name].js', 
    }, 

Вам нужно поместить этот [name].js файл в dist/index.html.

This blog post может быть вам полезен для правильной настройки!