Webpack5：如何禁用將靜態檔案復制到構建檔案夾？

我在專案中使用了 webpack 2，幾天前我升級到了 5.6 版。2-3 小時，專案編譯正常，但我只有一個問題。

我存盤在 /static/ 檔案夾中的所有靜態檔案（影像、字體）。

CSS檔案：

.link-yellow{
    background-image: url("/static/wifi2.png");
}
.link-red{
    background-image: url("/static/wifi4.png");
}
.link-grey{
    background-image: url("/static/wifi3.png");
}

編譯 JS 包檔案后的 Webpack 2 不接觸 cssurl(...)鏈接，但 webpack 5 將檔案復制到檔案夾/build/，最后我有這個：

4e4b4524859364a45966.png
5b97c8a6a9b9aa05b4be.otf
7ed064d8178174fa9ce1.woff2
14d3902c59ccd98328c8.png
440e51cee01b3e78fed5.png
664550a92a1dbb39a80a.png
build.js

這記錄（如4e4b4524859364a45966.png）在build.js：

...3197:function(t,e,n){"use strict";t.exports=n.p "4e4b4524859364a45966.png"}...

建設進度：

我嘗試使用file-loader這個引數：

module: {
        rules: [
                       ....
                         {
                            test: /\.(png|svg|jpg|jpeg|gif|gif|woff|woff2|eot|ttf|otf)$/,
                            loader: 'file-loader',
                            options:{
                              emitFile: false,
                              name: '[name].[ext]'
                            }
                         }
                    ....
              ]
}

但在那之后，我在/build/檔案夾中有相同的檔案，里面有這樣的文本：

export default __webpack_public_path__   "wifi2.png";
export default __webpack_public_path__   "exo2.otf";
export default __webpack_public_path__   "wifi3.png";

我將一些影像檔案移動到style="..."vue 檔案中的屬性：

<div id="mainFooter" style="background: transparent url('/static/wifi3.png') no-repeat 0 0">

和 webpack 不接觸此文本，也不在/build/檔案夾中生成靜態檔案的副本，一切正常。正是我需要的。

完整來源webpack.config.js：

var path = require('path');
var webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    mode: 'production',
    plugins: [
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.styl$/,
                use: ['style-loader', 'css-loader', 'stylus-loader']
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader','css-loader']
            },
            {
                test: /\.scss$/,
                use: ['vue-style-loader','css-loader','sass-loader'],
            },
            {
                test: /\.sass$/,
                use: ['vue-style-loader','css-loader','sass-loader?indentedSyntax'],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                        test: /\.(png|svg|jpg|jpeg|gif|gif|woff|woff2|eot|ttf|otf)$/,
                        loader: 'file-loader',
                options:{
                    emitFile: false,
                    name: '[name].[ext]'
                }
               }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        client: {
              overlay: true,
        },
        static: './'
    },
    performance: {
        hints: false
    },
    devtool: 'eval-source-map',
    optimization: {
        minimize: true,
        portableRecords: true,
        removeAvailableModules: true,
        minimizer: [
            new TerserPlugin({
                parallel: true,
                terserOptions: {
                            format: {
                        comments: false,
                    },
                },
                extractComments: false
                })
        ]
    }
};

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = 'inline-nosources-cheap-source-map';//source-map
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

也許有人知道如何禁用在 /build/ 檔案夾中生成靜態檔案并將檔案 url 保留在 css 中而不修改路徑？

uj5u.com熱心網友回復：

更新：我有一些進展。代碼在 css 檔案中禁用觸摸 url，但字體仍在復制：

{
    test: /\.css$/,
    use: ['vue-style-loader']
},
{
    test: /\.css$/,
    loader: 'css-loader',
        options: {
            url: false,
        },
},

更新2：完成。添加：

{
    test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
    type: "asset",
}

最后禁用生成其他檔案。現在只生成/build/build.js檔案

標籤：Vue.js 网络包

上一篇：@babel/eslint-parser在vue檔案上拋出錯誤

下一篇：GetTemplateChild/TemplatePart在Avalonia嗎？