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的问题不会在webpack-dev-server（它使用内存文件系统）中发生

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

1 个答案: