I
I
Incold2020-10-13 17:15:48
webpack
Incold, 2020-10-13 17:15:48

Why does webpack completely copy src to dist during build build?

Actually, the problem is displayed in the title.
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"]
}


As a result, everything is assembled without errors, but in the dist folder, in addition to the sbilgen files, a completely copied src folder appears. How can this be fixed? Thanks in advance for any help!

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question