使用 Webpack 将 src 文件夹结构维护到 dist 文件夹中？答案

【问题标题】：Maintain src folder structure into dist folder with Webpack?使用 Webpack 将 src 文件夹结构维护到 dist 文件夹中？
【发布时间】：2018-12-04 10:14:59
【问题描述】：

我正在研究 Webpack，我正面临这个问题。当我运行构建任务“npm run build”时，webpack 会创建 dist 文件夹。问题是 dist 文件夹不尊重 src 文件夹，而 Webpack 将所有文件放入根文件夹（dist 文件夹）。所以我在样式文件和所有图像附近都有 *.html 页面。我想要dist里面的html文件，img里面的图片（dist里面的img）等等……

这是我的 webpack.config.js 文件：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      },
    },
    {
      test: /\.html$/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: true,
        },
      }],
    },
    {
      test: /\.(css|scss)$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            sourceMap: true,
            url: false,
            minimize: true,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true,
          },
        },
        {
          loader: 'sass-loader',
        },
      ],
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      }],
    },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new HtmlWebPackPlugin({
      template: './src/work.html',
      filename: 'work.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
    }),
    new CleanWebpackPlugin(['dist']),
  ],
};

我在 Internet 上找到了一些东西，但所有解决方案都不起作用。也许我做错了什么？请帮帮我。

【问题讨论】：

标签： javascript webpack

【解决方案1】：

  ...
  module: {
    rules: [
     ...
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'img/[name].[ext]',
        },
      }],
    },
    ],
  },
  plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
    }),
  ],
};

您只需将路径添加到名称

【讨论】：