node.js - Webpack 帮助 - 将热加载和源映射添加到 React/Node 项目

Question

我是一个 webpack 新手。我正在尝试将 React 添加到一个简单的 Node 项目中，但我只将 React 与预先设置的 webpack 开发服务器一起使用，而不是与另一台服务器一起使用。 Webpack 运行它自己的 Node 服务器，所以这给我带来了一个问题。

以下是我需要帮助的内容:

如果我使用 Express，如何添加热加载和源映射？

如何使用 webpack 从我的公共(public)文件夹中添加全局 Bootstrap css 到这个项目(有没有办法像我使用 js 文件和 html-webpack-plugin 那样做)？

我尝试使用 webpack 的开发服务器来获得热加载，但我遇到了两个服务器冲突的问题:webpack 和 app.js 服务器。

这是我的 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")到插件并用 loader: ExtractTextPlugin.extract("style-loader", "css-loader") 替换我的 css 加载器但我仍然无法将引导 css 或任何 css 添加到我的应用程序中。

Answer 1

请在您的 webpack.config.babel 中通知文件你有这个输出:

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

你需要把这个 [name].js文件在您的 dist/index.html .

This blog post可能对您正确设置有帮助!