Webpack 帮助 - 为 React/Node 项目添加热加载和源映射 [英] Webpack help - add hot loading and source mapping to a React / Node Project

问题描述

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

I'm a webpack newbie. I'm trying to add React to a simple Node project but I've only ever used React with a pre set up webpack dev server and not with another server. Webpack runs it's own node server so this poses one problem for me.

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

Here's what I need help with:

1. 如果我使用 Express，如何添加热加载和源映射?
2. 如何使用 webpack 从我的公共文件夹中将全局 Bootstrap css 添加到该项目(有没有办法像我使用 js 文件和 html-webpack-plugin 那样做)?

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

I've tried using webpack's dev server to get get hot loading but I've run into the problem where I have two servers conflicting: webpack and app.js server.

这是我的 app.js 文件的一部分

Here's part of my app.js file

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

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

I tried adding new ExtractTextPlugin("dist/[name].css") to plugins and replacing my css loader with loader: ExtractTextPlugin.extract("style-loader", "css-loader") but I'm still not able to add bootstrap css or any css to my app.

推荐答案

注意在你的 webpack.config.babel 文件中你有这个输出:

Notice in your webpack.config.babel file you have this output:

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

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

You need to put this [name].js file in your dist/index.html.

这篇博文 可能有助于您正确设置！

This blog post might be helpful for you for getting yourself properly set up!

这篇关于Webpack 帮助 - 为 React/Node 项目添加热加载和源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！