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:
- 如果我使用 Express,如何添加热加载和源映射?
- 如何使用 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屋!