Задать вопрос
@Incold

Почему webpack полностью копирует src в dist во время build сборки?

Собственно, проблема отображена в названии.
webpack.config.js:
const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const autoprefixer = require('autoprefixer')
const ImageminPlugin = require("imagemin-webpack-plugin").default;

const isDev = process.env.NODE_ENV === 'development';

const optimization = () => {
  const config = {
    splitChunks: {
      chunks: 'all'
    }
  }

  if (!isDev) {
    config.minimize = true;
    config.minimizer = [
        new TerserWebpackPlugin(),
        new OptimizeCssAssetsWebpackPlugin()
    ]
  }
  return config;
}

const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`

module.exports = {
  context: path.resolve(__dirname, "src"),
  devtool: isDev ? 'source-map' : false,
  entry: {
    main: ["@babel/polyfill", "./index.tsx"]
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    filename: filename('js')
  },
  resolve: {
    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx']
  },
  optimization: optimization(),
  devServer: {
    inline: true,
    port: 3000,
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        },
      },
      {
        test: /\.(ts|tsx)?$/,
        exclude: '/node_modules/',
        use: {
          loader: 'ts-loader'
        }
      },
      {
        test: /\.(sc|sa|c)?ss$/,
        exclude: '/node_modules/',
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: isDev
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer({
                    browsers:['ie >= 11', 'last 4 version']
                  }),
                  [
                    'postcss-preset-env',
                    {
                      browsers: 'last 4 versions'
                    },
                  ],
                ]
              },
              sourceMap: isDev
            }
          },
          {
            loader: 'sass-loader',
                options: {
                sourceMap: isDev
              }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico|ttf|woff|woff2|eot)$/,
        use: ["file-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      minify: {
        collapseWhitespace: !isDev
      }
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          context: path.resolve(__dirname),
          from: 'src/assets/images',
          to: 'images'
        },
        {
          context: path.resolve(__dirname),
          from: 'src/assets/favicon.ico',
          to: 'favicon.ico'
        },
        {
          context: path.resolve(__dirname),
          from: 'web.config',
          to: 'web.config'
        }
      ]
    }),
    new MiniCssExtractPlugin({
      filename: isDev ? '[name].css' : '[name].[hash].css',
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new ImageminPlugin({
      test: /\.(png|jpe?g|gif|svg)$/,
      disable: isDev,
      pngquant: {
        quality: '95-100'
      }
    })
  ]
};

tsconfig.json:
{
  "compilerOptions": {
    "outDir": "dist",
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitAny": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "noImplicitReturns": true,
    "module": "esnext",
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "suppressImplicitAnyIndexErrors": true
  },
  "include": [ // не уверен влияет ли это, но я также удалял include, но это не помогло
    "src",
    "src/declaration.d.ts"
  ],
  "exclude": ["node_modules"]
}


В итоге всё собирается без ошибок, но в папке dist, помимо сбилдженных файлов появляется полностью скопированная папка src. Как это можно исправить? Заранее, спасибо, за любую помощь!
  • Вопрос задан
  • 69 просмотров
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
@xxvxx
....
ответ на вопрос
devServer: {
  devMiddleware: {
    writeToDisk: true,
  },
},
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы