javascript - webpack打包时html-webpack-plugin不自动的引用CommonsChunkPlugin公共文件

 海带木耳求_529 发布于 2022-11-18 09:01

webpack打包的时CommonsChunkPlugin抽出的公共js和css文件,html-webpack-plugin渲染出的html不自动的引用公共文件。

用wewbpack构建多页应用,每个页面单独一个入口js文件,用很多公共代码所以用了CommonsChunkPlugin对公共代码进行抽取,设定超过2次引用则抽取

但是当用了html-webpack-plugin渲染html时,如果某个文件被抽取成公共代码,则渲染后html则不会包含公共代码。

弄了一中午没有搞定,还望各位大神指点

源代码在这里:http://pan.baidu.com/s/1qXDVeAo

//webpack.config.js
var Path =require('path');
var Wp =require('webpack');
var ETWP =require('extract-text-webpack-plugin');
var HWP = require('html-webpack-plugin');
var eSCSS = new ETWP('css/[name].css');

module.exports ={
    entry :{
        indexApp: Path.resolve(__dirname ,'./src/js/index.js'),
        aboutApp: Path.resolve(__dirname ,'./src/js/about.js'),
    },
    output :{
        path :'./lib/',
        filename :'js/[name].js',
    },
    module :{
        loaders :[
            {
                test: /\.scss$/i, 
                loader: eSCSS.extract(['css','sass']),
            },
        ],
    },
    plugins :[
        new HWP({
            filename: './about.html',
            template: './src/tpl/about.html',
            chunks:["aboutApp","library.js?1.2.1"],
            xhtml: true,
            inject: true,
        }),
        new HWP({
            filename: './index.html',
            template: './src/tpl/index.html',
            chunks:["indexApp"],
            xhtml: true,
            inject: true,
        }),
        new Wp.optimize.CommonsChunkPlugin({
            name: 'library',
            minChunks:2,
        }),
    
};




2 个回答
  • 你既然用到了CommonChunk的插件的话,那么在不管在哪个入口页面里都必须要把CommonChunk的包给带上,要不然会报错。因为其他的包会有对CommonChunk的依赖。

    我觉得楼主可以通过:

        require.ensure([], function() {
            require('someChunks');
            //do something else
        })

    这样可以:

    • 异步加载模块

    • 不需要一开始加载CommonChunk(如果你的入口文件确实不需要的话).

    2022-11-18 09:51 回答
  • 原因是因为你在html-webpack-plugin的参数里指定了chunks参数却又没有把CommonChunk包含在内。

    把你的CommonChunk(在你的例子里叫library)加进chunks里就好了,比如例子里的chunks:["library", "aboutApp","library.js?1.2.1"]

    2022-11-18 09:51 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有