鍍金池/ 問答/HTML/ 使用webpack打包生成的filename: '[name].[chunkha

使用webpack打包生成的filename: '[name].[chunkhash].js'怎么放到html文件中

plugins: [
        // new CleanWebpackPlugin(['static']),
        new CleanWebpackPlugin(pathsToClean, cleanOptions),

        new webpack.optimize.CommonsChunkPlugin({
            // names: ['jquery','vendor','runtime'],
            // names: ['jquery','echarts','highcharts','vendor'],//跟頁面插入的順序相反
            // names: ['echarts','highcharts','vendor'],
            // names: ['highcharts','vendor'],
            names: ['vendor'],
            minChunks: Infinity
        }),

        new HtmlWebpackPlugin({
            title: 'Output Management',
            //excludeAssets: [/style.*.js/] // exclude style.js or style.[chunkhash].js
        }),
        new HtmlWebpackExcludeAssetsPlugin(),
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('production')
            }
        })


        /*
        new webpack.ProvidePlugin({ // 將 $ 變量掛載到 window 下面，可以在項(xiàng)目中直接使用 $ 不用再引用
            $:"jquery",
            jQuery:"jquery",
            "window.jQuery":"jquery"
        })
        */

    ]
回答
編輯回答
孤影

vue-cli的配置

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    })

另有一篇文章

2017年3月3日 05:01
編輯回答
心上人

在 HtmlWebpackPlugin配置html模板，生成的js就會自動插入到這個(gè)模板中。 更詳細(xì)的可以參考https://github.com/jantimon/h... 官方文檔

new HtmlWebpackPlugin({
    title: 'Output Management',
    template: 'template.html'
}),
2018年5月28日 08:27