带有反应热加载器的多入口点 webpack答案

【问题标题】：Multiple entry point web pack with react hot loader带有反应热加载器的多入口点 webpack
【发布时间】：2018-06-18 16:28:02
【问题描述】：

我想在我的 react 项目中添加多个 html 页面，因为目前我无法添加 react-router。我有一个侧边菜单组件，在我的设计中（我还没有尝试过）会这样做：

<div className="menu">
  <ul className="menu-list">
    <li><a href="page1.html">Page1</a></li>
    <li><a href="page2.html">Page2</a></li>
  </ul>
</div>

这是我实际的 webpack 配置：

var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";

loaders.push({
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
    exclude: ['node_modules']
});

module.exports = {
    entry: [
        'react-hot-loader/patch',
        './src/index.jsx', // your app's entry point
    ],
    devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
    output: {
        publicPath: '/',
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders
    },
    devServer: {
        contentBase: "./public",
        // do not print bundle build stats
        noInfo: true,
        // enable HMR
        hot: true,
        // embed the webpack-dev-server runtime into the bundle
        inline: true,
        // serve index.html in place of 404 responses to allow HTML5 history
        historyApiFallback: true,
        port: PORT,
        host: HOST
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"development"'
            }
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin({
            filename: 'style.css',
            allChunks: true
        }),
        new DashboardPlugin(),
        new HtmlWebpackPlugin({
            template: './src/template.html',
            files: {
                css: ['style.css'],
                js: [ "bundle.js"],
            }
        }),
    ]
};

目前我只有一个html页面（template.html），我的想法是做这样的事情：

entry: {
    page1: './src/page1',
    page2: './src/page2.js'
},
output: {
    path: path.resolve(__dirname, 'build', 'target'),
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle_[chunkhash].js',
    sourceMapFilename: '[file].map'
},

然后是这个：

plugins: [
  new HtmlWebpackPlugin({
    filename: 'page1.html',
    template: 'src/page1.html',
    chunks: ['page1']
  }),
  new HtmlWebpackPlugin({
    filename: 'page2.html',
    template: 'src/page2.html',
    chunks: ['page2']
  })
]

但我不明白在哪里插入 react-hot-loader，我不知道这是否是解决我的问题的最佳解决方案。

【问题讨论】：

标签： javascript reactjs react-hot-loader

【解决方案1】：

这是一个老问题，但我也在寻找解决方案。

你需要做的是这样的：

entry: {
    page1: ['react-hot-loader/patch','./src/page1.js'],
    page2: ['react-hot-loader/patch','./src/page2.js'],
},

【讨论】：