soundcloud / chunk-manifest-webpack-plugin

Allows exporting a manifest that maps entry chunk names to their output files, instead of keeping the mapping inside the webpack bootstrap.
MIT License
395 stars 73 forks source link

include manifest.json even when inlineManifest set to true #50

Open sdhhqb opened 7 years ago

sdhhqb commented 7 years ago

I was trying to use chunk-manifest-webpack-plugin to stop vendor.js hash change every time. In generated html, a script tag include manifest.json, but not vendor.js.Am I use this plugin in a wrong way.

template body:

<body>
    <div id="root"></div>

    <%= htmlWebpackPlugin.files.webpackManifest %>
  </body>

generated body:

<body>
    <div id="root"></div>

    <script>window.webpackManifest={"0":"js/0.bundle.33f32fc14a43e1de2c01.js"}</script>
  <script type="text/javascript" src="/manifest.json"></script><script type="text/javascript" src="/js/app.33f32fc14a43e1de2c01.js"></script></body>

webpack config:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'react-router', 'react-router-dom'],
    app: './src/index.js'
  },

  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: "js/[id].bundle.[chunkhash].js"
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: 'babel-loader'
      },

      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },

      {
        test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=512&&name=image/css/[name].[ext]?[hash]'
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(['dist'], {exclude: ['image']}),

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),

    new ExtractTextPlugin({filename: 'style.[contenthash].css'}),

    new HtmlWebpackPlugin({
      template: './src/template.html',
      inject: 'body'
    }),

    new webpack.NamedModulesPlugin(),

    new ChunkManifestPlugin({
      filename: 'manifest.json',
      manifestVariable: 'webpackManifest',
      inlineManifest: true
    })

  ]

}