webpack - 文件加载器正在删除从 CopyPlugin 复制的图像

Question

我认为我的 Webpacking 错误。在我的 Webpack 配置中，我有一个模块规则来在 scss 文件中遇到文件时加载文件，并且我还使用 CopyPlugin 复制大量其他图像。

问题是，当我在开发中运行 Webpack 并将“watch”设置为 true 时，文件加载器将删除 dist 文件夹中的所有内容，然后复制 SCSS 文件中引用的图像。因此，通过 CopyPlugin 复制的所有其他内容都将被删除。

我是否应该以不同的方式处理我的 SCSS/JS 中引用的图像。理想情况下，我会忽略 SCSS/JS 中对这些东西的所有引用，只需通过 CopyPlugin 手动复制文件

这是我的配置：

module.exports = {
  mode: 'development',
  watch: true,
  entry: {
    frontend: './_src/entry.js',
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, paths.distRoot),
  },
  module: {
    rules: [
      // js
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          },
        },
      },
      // css
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader' },
        ],
      },
      // scss
      {
        test: /\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          // css 
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
          // autoprefix things
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: [
                autoprefixer({ browsers: ['last 2 version'] }),
              ],
            },
          },
          // sass
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                paths.npmRoot + '/font-awesome',
                paths.srcRoot + '/scss',
                paths.npmRoot,
              ],
            },
          },
        ],
      },
      // fonts
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts',
          publicPath: '../fonts',
        },
      },
      // images
      {
        test: /\.(jpg|png|svg|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 1,
          name: '[name].[ext]',
          outputPath: 'img',
          publicPath: '../img',
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new CopyPlugin([
      {
        from: path.resolve(__dirname, paths.srcRoot + '/img'),
        to: path.resolve(__dirname, paths.distRoot + '/img'),
        copyUnmodified: true,
      },
    ]),
    new (webpack.optimize.OccurenceOrderPlugin || webpack.optimize.OccurrenceOrderPlugin)(),
  ],
};

Answer 1

你没看错。 Webpack 无法获取有关您未在 js/scss 中直接引用的图像的任何知识。一些想法如何处理这样的图像：

1) 使用 copy-webpack-plugin 复制图像，但不要由任何加载器处理。或者使用插件和加载器，但为其设置不同的输出路径。 如何使用文件加载器设置输出路径：

{
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: 'my-super-assets/[path][name].[ext]', 
          // OR outputPath: 'my-super-assets'
        },
},

将强制您的图像到my-super-assets 文件夹
以及用于复制 webpack-plugin

new CopyPlugin([
      {
        from: path.resolve(__dirname, paths.srcRoot + '/img'),
        to: path.resolve(__dirname, paths.distRoot + '/another-super-assets''),
        copyUnmodified: true,
      },
    ]),

2) 使用dynamic imports在用户输入上动态加载图像
一些简单的 html/js 代码如何使用它：

<input id="input" type="checkbox">

document.querySelector("#input").addEventListener('change', event => {
  if(event.target.checked) {
    // it will be handled with loader you choose, url-loader or file loader for example
    // or you can write import to js file, which have multiple imports to images already
    import("./assets/foo.svg").then((image) => // image is ready to use)
  }
})

PS：我认为 webpack-dev-server（它使用内存文件系统）不会发生你描述的关于带有 watch 模式的 webpack 的问题