Webpack 不会将图像保存在我的“built”文件夹中答案

【问题标题】：Webpack does not keep images in my `built` folderWebpack 不会将图像保存在我的“built”文件夹中
【发布时间】：2019-03-20 22:32:58
【问题描述】：

Webpack 正在将我的图像从我的src 文件夹移动到我的built 文件夹中。当我使用我的 Task Runner 或 npm run-script dev 运行 Development 时，我可以看到的图像从 src 移动到我的构建文件夹。我遇到的问题是，每当我对 CSS 或 HTML 进行更改时，我确实收到了成功的构建，但图像随后会从 built 文件夹中删除，因此无法加载。

很多，包括 S.O 上的 this 文章告诉我我需要使用 'copy-webpack-plugin' 和 file-loader，但我有这些。

const CopyWebpackPlugin = require('copy-webpack-plugin');

我的入口文件是这样的

module.exports = {
    entry: {
        app: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, './built'),
        publicPath: '/built'
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin()
        ]
    },
    plugins: [    
        // Clean built folder.
        new CleanWebpackPlugin({
            "verbose": true // Write logs to console.
        }),

        // avoid publishing when compilation failed.
        new webpack.NoEmitOnErrorsPlugin(),

        // Move & compress/process images
        new CopyWebpackPlugin(
            [
                {
                    from: path.resolve(__dirname, './src/img/'),
                    to: path.resolve(__dirname, './built/img/')
                },
                {
                    from: path.resolve(__dirname, './src/fonts/'),
                    to: path.resolve(__dirname, './built/fonts/')
                },
            ]),

        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            pngquant: {
                quality: '95-100'
            }
        }),

        new HtmlWebpackPlugin({
            inject: "body",
            filename: "../Views/Shared/_Layout.cshtml",
            template: "./Views/Shared/_Layout_Template.cshtml"
        }),

        new WebpackNotifierPlugin(),
    ],
    module: {
        rules: [
            {
                // Enable ES6 transpilation 
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            },
            {
                test: /\.((s)?css)$/,
                use: [
                    { loader: "style-loader" },
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        // Interprets `@import` and `url()` like `import/require()` and will resolve them
                        loader: 'css-loader'
                    },
                    {
                        // Loader for webpack to process CSS with PostCSS
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('autoprefixer')
                                ];
                            },
                        }
                    },
                    {
                        loader: 'resolve-url-loader'
                    },
                    {
                        // Loads a SASS/SCSS file and compiles it to CSS
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    }
                ]
            },
            // Font files will be handled here
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [{
                    loader: 'file-loader'
                }]
            },
            // Image files will be handled here
            {
                test: /\.(jpg|png|gif|svg)$/,
                use: [{
                    loader: 'file-loader'
                }]
            },
            // All files with ".html" will be handled 
            { test: /\.html$/, loader: "html-loader" }
        ]
    },

};

正如我所说，我不明白为什么当我第一次运行脚本时，我得到一个“构建成功”，但是当我进行更改并且 Webpack 神奇地实现了它时，图像然后从我的built 文件夹。

我正在引用我的文件，例如

<img src="/built/img/example.png">

【问题讨论】：

标签： webpack

【解决方案1】：

尝试设置copyUnmodified 选项。看起来 CleanWebpackPlugin 在监视模式下会在每次更新时清除所有内容，但 CopyWebpackPlugin 不会再次复制文件。

        new CopyWebpackPlugin(
        [
            {
                from: path.resolve(__dirname, './src/img/'),
                to: path.resolve(__dirname, './built/img/')
            },
            {
                from: path.resolve(__dirname, './src/fonts/'),
                to: path.resolve(__dirname, './built/fonts/')
            },
        ], {
            copyUnmodified: true
        }),

【讨论】：