Webpack 文件加载器复制到 [dest]/[folder]/[file] 而不是只需要 [dest]/[file]

Question

Windows 10. 我正在关注 https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement 上的 React + Webpack 教程，并停留在我们应该将 index.html 从 app/ 文件夹复制到 dist/ 文件夹的位置。而不是复制到 /dist 文件夹 index.html 被复制到 dist/app/ 文件夹。你能帮忙吗？

这是我的 webpack.config.js 文件

module.exports = {
    context: __dirname + "/app",
    entry: {
        javascript: "./app.jsx",
        html: "./index.html"
    },
    output: {
        filename: 'app.js',
        path: __dirname + "/dist",
        publicPath: __dirname + "/dist"
    },
    module: {
        loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.html$/,
        loader: 'file-loader?name=[name].[ext]'
      }
        ]
    }
};

文件夹结构

├───app
│       app.jsx
│       greeting.jsx
│       index.html
│
└───dist

提前致谢！

Answer 1

在 Windows OS 路径分隔符是 \ 而不是 /.

因此，您应该使用 path.join 连接两部分路径：

var path = require('path');

module.exports = {
    context: path.join(__dirname, "app"),
    ...

Webpack 文件加载器复制到 [dest]/[folder]/[file] 而不是只需要 [dest]/[file]

Webpack file-loader copies to [dest]/[folder]/[file] instead of just desired [dest]/[file]

webpack

webpack-file-loader