Question

Webpack应该将我的图像从我的src文件夹移动到我的built文件夹。当我使用Task Runner或Development运行npm run-script dev时，我看到的图像从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" }
        ]
    },

};

正如我说的，我看不到的是为什么当我第一次运行脚本时，我得到一个“ Build Success”，但是当我进行更改并且Webpack做到神奇时，该图像便从我的图像中删除了。 built文件夹。

我引用的文件是

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

Answer 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
        }),

Webpack没有将图像保存在我的“ built”文件夹中

1 个答案: