前端之家

  1. 首页
  2. 问答

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

• 问答

我认为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$/,// 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)(),};
yangpq008 回答：webpack-文件加载器正在删除从CopyPlugin复制的图像

您说对了。 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（它使用内存文件系统）中发生

sasswebpackwebpack-4webpack-file-loader
本文链接：https://www.f2er.com/3079423.html

大家都在问