Webpack 网页包-文件加载程序正在删除从CopyPlugin复制的图像

我想我的网页包装错了。在我的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)(),
  ],
};

---

你说得对。Webpack无法获取有关您在js/scss中未直接引用的图像的任何信息。关于如何处理此类图像的一些想法：

1） 使用copywebpack插件复制图像，但不要通过任何加载程序处理。或者使用插件和加载器，但为其设置不同的输出路径。 如何使用文件加载器设置输出路径：

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

将强制您的图像进入“我的超级资产”文件夹
和复制网页包插件

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

2） 使用
一些简单的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)
  }
})

document.querySelector（“#input”）.addEventListener（'change'，event=>{
if（event.target.checked）{
//它将由您选择的加载程序处理，例如url加载程序或文件加载程序
//或者您可以将导入写入js文件，该文件已经有多个图像导入
导入（“./assets/foo.svg”）。然后（（image）=>//image已准备好使用）
}
})

---

PS：我认为您描述的关于webpack带监视模式的问题不会发生在webpack开发服务器上（它使用内存文件系统）

您答对了。Webpack无法获取有关您在js/scss中未直接引用的图像的任何信息。关于如何处理此类图像的一些想法：

1） 使用copywebpack插件复制图像，但不要通过任何加载程序处理。或者使用插件和加载器，但为其设置不同的输出路径。 如何使用文件加载器设置输出路径：

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

将强制您的图像进入“我的超级资产”文件夹
和复制网页包插件

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

2） 使用
一些简单的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)
  }
})

document.querySelector（“#input”）.addEventListener（'change'，event=>{
if（event.target.checked）{
//它将由您选择的加载程序处理，例如url加载程序或文件加载程序
//或者您可以将导入写入js文件，该文件已经有多个图像导入
导入（“./assets/foo.svg”）。然后（（image）=>//image已准备好使用）
}
})

---

PS：我认为您所描述的关于webpack带监视模式的问题不会发生在webpack dev server上（它使用内存文件系统）

为什么您需要CopyWebpackPlugin？我想你不需要它。您已经使用url loader处理了图像，它会将您的图像作为base64加载到js输出文件中。我也看不到你的配置文件加载器。即使你使用文件加载器，你也不需要copywebpackplugin。因为IIRC文件加载器和url加载器只有在遇到JS或SCS中的图像时才会工作。但是，我的一些图像在这些文件中没有直接引用，而是可以通过用户输入进行切换。因此，这些“可选”图像永远不会得到处理。你为什么需要CopyWebpackPlugin呢？我想你不需要它。您已经使用url loader处理了图像，它会将您的图像作为base64加载到js输出文件中。我也看不到你的配置文件加载器。即使你使用文件加载器，你也不需要copywebpackplugin。因为IIRC文件加载器和url加载器只有在遇到JS或SCS中的图像时才会工作。但是，我的一些图像在这些文件中没有直接引用，而是可以通过用户输入进行切换。因此，这些“可选”图像永远不会得到处理。