webpack - manifest.json 中缺少条目

问题描述

我无法通过 github 和 google搜索CopyWebpackPlugin或ManifestPlugin的问题的解决方案。

webpack -p当我使用以下方法构建捆绑包时，就完成了。

代码通过转译器、minify 等运行（参见 webpack.config.js）
导入的 css 资源将被发射（MiniCssExtractPlugin）
输出文件夹 ( public/build) 被清空 ( CleanWebpackPlugin )
一些资源assets/img/static被复制到public/build/img（CopyWebpackPlugin）
编写了 manifest.json，它与 symfony 的资产帮助程序很好地配合使用，无论文件是从/build还是localhost:8080/build（也称为生产构建或开发服务器）（ManifestPlugin）提供的，它都可以让您引用相同的路径

这运作良好。

如果我用观看和提供文件webpack-dev-server -d --env.development，同样可以实现。

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

这些文件仍然来自例如。http://localhost:8080/build/img/app-logo.png.

有谁知道这个问题与哪个插件有关？或者更好的如何解决这个问题？

我将在下面粘贴正确manifest.json的、未完成的和我的 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
      }),
    ]
  };
};

标签： webpackwebpack-dev-server

webpack - manifest.json 中缺少条目

问题描述

解决方案

推荐阅读