Question

我无法通过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（也称为生产版本或devserver）提供，您都可以引用相同的路径）（ 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
      }),
    ]
  };
};

Answer 1

好的，有人对清单插件有类似的问题，这似乎是版本2.0.3中的错误。一种解决方法是在插件的配置中将seed选项重置为{}

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

确实如此，如插件{GitHub页面上的issue中所述。

manifest.json中缺少条目

1 个答案: