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

问题描述：

我是一个webpack新手。我正在尝试将React添加到一个简单的Node项目中，但是我只使用过React和预先设置的webpack dev服务器，而没有使用其他服务器。 Webpack运行它自己的节点服务器，所以这给我带来了一个问题。Webpack帮助 - 将热加载和源映射添加到React/Node项目

这里就是我需要帮助：

如何添加热负载和源映射，如果我用快递？
如何从我的公共文件夹与webpack添加一个全局Bootstrap的CSS到这个项目（有没有办法做到这一点，我怎么这样做与js文件和html-webpack插件）？

我试过使用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添加到我的应用程序。在webpack.config.babel文件

答

通知你有这样的输出：

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

你需要把这个文件在你的dist/index.html。

This blog post可能会有助于你让自己正确设置！

这不就是'html-webpack-plugin'在做什么？它将我的js文件添加到我的dist文件夹中的index.html文件中。或者你在说别的吗？ – Turnipdabeets

我明白了，'[name] .js'是什么？你可以将它命名为'react.js'（不带'[]'），看看它是否被导入？它可能打破了括号。 –

[name] .js就像是入口对象中的关键字I的可变占位符。 – Turnipdabeets

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

相关推荐