Question

如果标题真的不正确，请提前致歉。我想创建多个React应用，并将它们放在我网站上的单独文件夹中以进行展示。但是问题是，当我将html和所有文件放在文件夹中时，页面无法正确加载，因此缺少文件，依此类推。

但是当我将文件放在根目录中时，所有文件都运行良好，但是root并不是我的选择。

所以我的结构是我想要的：

www.mywebsite.com/projects/project1/html ...

www.mywebsite.com/projects/project2/html ...

www.mywebsite.com/projects/project3/html ... ...

我已经上传了一个示例react应用程序，因此在开发模式下它运行良好，但是当我构建它并尝试将文件复制到文件夹然后使用MAMP打开它时，我遇到了问题。

Github：https://github.com/MariuzM/react-test

webpack.common.js

module.exports = {
  entry: { main: './src/index.js' },

  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader']
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },

  resolve: { extensions: ['*', '.js', '.jsx'] }
};

webpack.dev.js

const common = require('./webpack.common');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'development',

  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
});

webpack.prod.js

const common = require('./webpack.common');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',

  optimization: {
    minimizer: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: { removeAttributeQuotes: false, collapseWhitespace: false, removeComments: true }
      })
    ]
  }
});

如何配置Webpack从非root目录打开html？

0 个答案: