Webpack: избегайте копирования глобальных статических файлов в папку dist

Я борюсь с веб-пакетом, чтобы избежать копирования файлов из статических папок в папку dist в производственном режиме.

В процессе разработки статические поля должны быть загружены в папку dist, что сделано с загрузчиками файлов. Но как это возможно, что файл css загружает tree.jpg из статической папки, и изображение не будет скопировано в папку dist?

webpack.config.js

const WebpackBaseConfig = {
    mode: 'production',
    target: 'web',
    entry: {
        main: path.resolve(Utils.paths.src, 'index.js')
    },
    output: {
        path: Utils.paths.build,
        filename: '[name].[hash:8].js',
        chunkFilename: '[name].[hash].js',
        publicPath: '/',
    },
    performance: {
        maxEntrypointSize: 1000 * 1024,
        hints: process.env.NODE_ENV === 'production' ? false : 'warning'
    },
    resolve: {
        extensions: ['.js', '.json'],
        alias: {
            '~': Utils.paths.src,
            '@': Utils.paths.src
        },
        modules: [Utils.paths.modules]
    },
    resolveLoader: {
        modules: [Utils.paths.modules]
    },
    module: {
        noParse: /es6-promise\.js$/, // Avoid webpack shimming process
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [Utils.paths.src]
            },
            {
                test: /\.css$/,
                use: [Utils.styleLoader, Utils.cssLoader, Utils.postcssLoader]
            },
            {
                test: /\.scss$/,
                use: [Utils.styleLoader, Utils.cssLoader, Utils.postcssLoader, Utils.scssLoader]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            limit: 1000,
                            name: '[name].[ext]',
                            publicPath: '/'
                        }
                    }
                ]
            },
        ]
    }
}

Структура папки:

webpack-demo
  |- package.json
  |- webpack.config.js
  |- /static
    |- tree.jpg
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- style.css
    |- index.js
  |- /node_modules

0 ответов

Другие вопросы по тегам