Загрузчик файлов Webpack не копирует изображения во время производства из / sr c в / dist - PullRequest
Новая
       77

Загрузчик файлов Webpack не копирует изображения во время производства из / sr c в / dist

0 голосов
/ 21 февраля 2020

У меня есть настройка Webpack, которая разбита на 2 файла конфигурации:

webpack.config.js обрабатывает часть разработки, которая запускается с использованием npx webpack-dev-server и webpack.config.prod.js соответственно, которая обрабатывает производство, набрав npm run build .

Конфигурация разработки работает должным образом, но у рабочей есть одна проблема: все работает нормально, но изображения не копируются и не оптимизируются из исходной папки: src/images/sm, src/images/bg до dist/images/sm, dist/images/bg.

webpack.prod. js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = function(){
  return {
    mode: 'development',
    entry: [
      './src/app.js'
    ],
    watch: true,
    watchOptions: {
      aggregateTimeout: 300, // Process all changes which happened in this time into one rebuild
      poll: 1000, // Check for changes every second,
      ignored: /node_modules/,
      // ignored: [
      //   '**/*.scss', '/node_modules/'
      // ]
    },
    devtool: 'source-maps',
    devServer: {
      contentBase: path.join(__dirname, 'src'),
      watchContentBase: true,
      host: '0.0.0.0',
      hot: true,
      open: true,
      inline: true,
      port: 9000
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Webpack starter project',
        template: path.resolve('./src/index.pug')
      }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: ['raw-loader', 'pug-html-loader'],
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            "css-loader",
            "sass-loader"
          ]
        },
        {
          test: /\.(jpg|jpeg|gif|png|svg|webp)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                outputPath: './images',
                name: "[name].[ext]",
              },
            },
          ]
        },
        {
          test: /\.html$/,
          use: {
            loader: 'html-loader',
          }
        },
      ]
    }
  };
}

webpack.config.prod. js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');

module.exports = function(){
  return {
    mode: 'production',
    entry: [
      './src/app.js'
    ],
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin()
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Webpack starter project',
        filename: 'index.html',
        template: path.resolve('./src/index.pug')
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css'
      }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: ['raw-loader', 'pug-html-loader'],
        },
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
        },
        {
         test: /\.(jpg|jpeg|gif|png|svg|webp)$/,
         use: [
           {
             loader: "file-loader",
             options: {
               outputPath: './images',
               name: "[name].[ext]",
             },
           },
           {
             loader: 'image-webpack-loader',
             options: {
               bypassOnDebug: true,
               mozjpeg: {
                 progressive: false,
                 quality: 45
               },
               // optipng.enabled: false will disable optipng
               optipng: {
                 enabled: true,
               },
               pngquant: {
                 quality: '65-90',
                 speed: 4
               },
               gifsicle: {
                 interlaced: true,
                 optimizationLevel: 3
               },
               // the webp option will enable WEBP
               webp: {
                 quality: 20
               }
             }
           },
         ],
       },
        {
          test: /\.html$/,
          use: {
            loader: 'html-loader',
          }
        },
      ]
    }
  };
}

Я загрузил свой веб-пакет настройте Google Drive и, если кто-нибудь захочет проверить его, здесь это так. Я гуглил весь день и не вижу ничего плохого в своем коде. Я пробовал другие конфигурации веб-пакетов, и они имеют тот же код, что и мой, и их изображения копируются в папку dist. Может ли кто-нибудь помочь мне понять это?

1 Ответ

0 голосов
/ 21 февраля 2020

Кто-то в Reddit помог мне. Все, что мне нужно было сделать, это импортировать изображения в приложение. js. Как ни странно, использование других конфигов никогда не требовало от меня импорта изображений, но я думаю, что это потому, что эти конфиги были построены с использованием более старой версии загрузчика файлов.

Я также изменил свойство quality, поскольку webpack ожидает массив вместо строка. 

pngquant: {
  quality: [0.65, 0.90],
  speed: 4
}

Для создания изображений в папке dist по той же схеме дерева, что и в sr c Мне пришлось изменить эту часть: 

{
  loader: "file-loader",
    options: {
        name: "[path]/[name].[ext]",
        context: "src"
    },
},
...