manifest.json中缺少条目

Question

我既没有找到解决办法，也没有通过github和谷歌搜索CopyWebpackPlugin或ManifestPlugin的问题。

当我使用webpack -p构建包时，将完成以下操作。

• 代码通过转发器、minify等运行(请参阅webpack.config.js)
• 导入的css资产将发出(MiniCssExtractPlugin)。
• 输出文件夹(public/build)被清空(public/build)
• 将来自assets/img/static的一些资源复制到public/build/img public/build/img
• 编写一个manifest.json，它很好地与symfony的资产助手一起工作，它允许您引用相同的路径，而不管这些文件是从/build还是localhost:8080/build (又名生产构建还是devserver)提供的。

效果很好。

如果我使用webpack-dev-server -d --env.development观看和发送文件，也就实现了同样的目标。

但是，当我更改一些JS代码并重新构建所有内容时，CopyWebpackPlugin复制的资产就会从manifest.json查找文件中消失。

这些文件仍然是从例如提供的。http://localhost:8080/build/img/app-logo.png。

有没有人知道这个问题与哪个插件有关？或者更好地解决这个问题？

我将粘贴正确的manifest.json、未完成的webpack.config.js和下面的webpack.config.js的输出。

更正manifest.json

{
  "main.css": "http://localhost:8080/build/main.css",
  "main.js": "http://localhost:8080/build/main.bundle.js",
  "img/app-logo.png": "http://localhost:8080/build/img/app-logo.png"
}

manifest.json在第一次更改文件并让devserver重新构建之后

{
  "main.css": "http://localhost:8080/build/main.css",
  "main.js": "http://localhost:8080/build/main.bundle.js"

}

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = env => {
  const dev = env && env.development;

  let publicPath = '/build/';
  if (dev) {
    publicPath = 'http://localhost:8080/build/';
  }
  return {
    entry: {
      main: './assets/js/main.js',
    },

    output: {
      path: path.resolve(__dirname, 'public', 'build'),
      filename: '[name].bundle.js',
      publicPath: publicPath
    },

    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [
            'babel-loader',
          ],
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'url-loader',
              options: {
                context: path.resolve(__dirname, 'assets'),
                name: '[path][name].[ext]',
                limit: 1024
              }
            }
          ]
        },
        {
          test: /\.(jpe?g|png|gif)$/i,
          exclude: /node_modules/,
          use: [
            {
              loader: 'file-loader',
              options: {
                context: path.resolve(__dirname, 'assets'),
                name: '[path][name].[ext]',
              }
            }
          ]
        }

      ]
    },

    devtool: dev ? 'cheap-source-map' : false,

    devServer: {
      contentBase: path.join(__dirname, 'public'),
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
      }
    },

    resolve: {
      extensions: ['.js', '.jsx'],
      alias: {
        css: path.resolve(__dirname, 'assets', 'css')
      }
    },

    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new CopyWebpackPlugin([
        {
          from: 'assets/img/static/',
          to: 'img/',
        }
      ]),
      new CleanWebpackPlugin(
        [
          'public/build'
        ]
        ,
        {
          exclude: ['public/build/img/']
        }
      ),
      new ManifestPlugin({
        writeToFileEmit: true
      }),
    ]
  };
};

Answer 1

好吧，有人在清单插件上也有类似的问题，它似乎是2.0.3版本中的一个bug。解决方法是在插件的配置中将seed选项重置为{}

// [...]
new ManifestPlugin({
  writeToFileEmit: true,
  seed: {}
}),
// [...]

而且它真的能工作，正如在插件的问题页面上描述的那样。