多个html打包,分别引入不同的 多个 js 文件 流程

2021-03-01 23:26

阅读:480

标签:element   move   生成   源文件   ash   web   content   哈希   lap   

1. 入口配置一个或者多个:

entry:{   // 单个 js 打包

         ‘js/a‘:‘./htmlDist/cn/js/A.js‘ , // 单个 js 
         ‘js/b‘:[    // 多个 js 合并
             ‘./htmlDist/cn/js/B.js‘ ,
             ‘./htmlDist/cn/js/c.js‘ ,
         ]
},

 

2.  html 插件配置  , 注意在 html 插件配置里加入  :  chunks:[‘js/a‘],  这个属性  

plugins:[ 
        new CleanWebpackPlugin() ,   //  使用清除旧文件的插件  
        new htmlWebpackPlugin({   //  打包 A.html 文件插件
            minify:{
                minimize:true,//是否打包为最小值
                removeAttrbuteQuotes:true,//去除引号
                removeComments:true,//去掉注释
                collapseWhitespace:true,//去掉空格
                minifyCss:true,//压缩css
                removeEmptyElements:false,//清理内容为空的元素
            },
            template:"./htmlDist/cn/A.html" ,  //  引入需要打包的 html 文件 ,并生成到 最终的dist  文件夹里面去,  
            // title:‘A.html‘,   //  最终生成的 文件名   
            chunks:[‘js/a‘],     //需要引入的js文件名称
            filename: "A.html",   //生成html文件的文件名,默认是index.html
            hash:true ,   //引入产出的资源时加上哈希避免缓存
            inject: true,    
        }),

        new htmlWebpackPlugin({   //  打包 B.html 文件插件
            minify:{
                minimize:true,  //是否打包为最小值
                removeAttrbuteQuotes:true,  //去除引号
                removeComments:true,  //去掉注释
                collapseWhitespace:true,  //去掉空格
                minifyCss:true,  //压缩css
                removeEmptyElements:false,  //清理内容为空的元素
            },
            template:"./htmlDist/cn/B.html" ,  //  引入需要打包的 html 文件 ,并生成到 最终的dist  文件夹里面去,  
            // title:‘A.html‘,   //  最终生成的 文件名   
            chunks:[‘js/b‘],     //需要引入的js文件名称
            filename: "B.html",   //生成html文件的文件名,默认是index.html
            hash:true ,   //引入产出的资源时加上哈希避免缓存
            inject: true,    
        }),
      new htmlWebpackPlugin({   //  打包 c.html 文件插件
            minify:{
                minimize:true,  //是否打包为最小值
                removeAttrbuteQuotes:true,  //去除引号
                removeComments:true,  //去掉注释
                collapseWhitespace:true,  //去掉空格
                minifyCss:true,  // 压缩css
                removeEmptyElements:false,  //清理内容为空的元素
            },
            template:"./htmlDist/cn/c.html" ,   //  引入需要打包的 html 文件 ,并生成到 最终的dist  文件夹里面去,  
            // title:‘A.html‘,   //  最终生成的 文件名   
            chunks:[‘js/a‘ , ‘js/b‘],     //需要引入的js文件名称,可以多个 js 引入
            filename: "c.html",   //生成html文件的文件名,默认是index.html
            hash:true ,   //引入产出的资源时加上哈希避免缓存
            inject: true,    
        }),
], 

 

 

最终webpack 配置

const path=require(‘path‘); //调用node.js中的路径
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘);  //  清除旧的出口文件,使用 有hash 值的新文件
var htmlWebpackPlugin = require(‘html-webpack-plugin‘);   //  打包 html 插件
 var MiniCssExtractPlugin = require("mini-css-extract-plugin");  //  单独打包后的 .css 插件    , 新版本都采用这个

 //   var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);    //  抽离 css 文件打包插件   ;  这个版本引进被废弃


module.exports={
   // mode:"development" ,   //开发模式,没有对js等文件压缩,默认生成的是压缩文件
    mode : ‘production‘ ,  
    
    entry:{   // 单个 js 打包

         ‘js/a‘:‘./htmlDist/cn/js/A.js‘ , // 单个 js 
         ‘js/b‘:[    // 多个 js 合并
             ‘./htmlDist/cn/js/B.js‘ ,
             ‘./htmlDist/cn/js/c.js‘ ,
         ]
    },

    output:{
        // __dirname  表示webpack.config.js 这个配置文件的位置
       //  filename:‘[name].js‘,    //输入的文件名是什么,生成的文件名也是什么,默认配置

        filename:‘[name].[chunkhash:8].js‘,//增加8位的哈希值,生成新的动态文件 ,
        path:path.resolve(__dirname,‘dist‘) //指定生成的文件目录
    },

    plugins:[ 
        new CleanWebpackPlugin() ,   //  使用清除旧文件的插件  
        new htmlWebpackPlugin({   //  打包 A.html 文件插件
            minify:{
                minimize:true,//是否打包为最小值
                removeAttrbuteQuotes:true,//去除引号
                removeComments:true,//去掉注释
                collapseWhitespace:true,//去掉空格
                minifyCss:true,//压缩css
                removeEmptyElements:false,//清理内容为空的元素
            },
            template:"./htmlDist/cn/A.html" ,  //  引入需要打包的 html 文件 ,并生成到 最终的dist  文件夹里面去,  
            // title:‘A.html‘,   //  最终生成的 文件名   
            chunks:[‘js/a‘],     //需要引入的js文件名称
            filename: "A.html",   //生成html文件的文件名,默认是index.html
            hash:true ,   //引入产出的资源时加上哈希避免缓存
            inject: true,    
        }),

        new htmlWebpackPlugin({   //  打包 B.html 文件插件
            minify:{
                minimize:true,  //是否打包为最小值
                removeAttrbuteQuotes:true,  //去除引号
                removeComments:true,  //去掉注释
                collapseWhitespace:true,  //去掉空格
                minifyCss:true,  //压缩css
                removeEmptyElements:false,  //清理内容为空的元素
            },
            template:"./htmlDist/cn/B.html" ,  //  引入需要打包的 html 文件 ,并生成到 最终的dist  文件夹里面去,  
            // title:‘A.html‘,   //  最终生成的 文件名   
            chunks:[‘js/b‘],     //需要引入的js文件名称
            filename: "B.html",   //生成html文件的文件名,默认是index.html
            hash:true ,   //引入产出的资源时加上哈希避免缓存
            inject: true,    
        }),
     ],   
    devServer: {  // 本地服务器配置
        contentBase: ‘./dist‘,  //默认本地服务器所在的根目录
        historyApiFallback: true,   //是否跳转到index.html
        inline: true,   //源文件改变时刷新页面
        port: 8084 ,  //端口号,默认8080
        hot: true,
    }, 
    module: {     //文件加载器 loader  
       
        /* 单独打包 分离 css  和 js 文件插件开始  */
        rules: [

            {   // 打包 css  
                test: /\.css$/,   // 正则表达式,表示.css后缀的文件
                use: [‘style-loader‘,‘css-loader‘]   // 针对css文件使用的loader,注意有先后顺序,数组项越靠后越先执行
            },
                        
            {  //  打包 html 里面的  img 图片
                test: /\.(htm|html)$/i,
                use: ‘html-withimg-loader‘
        },
            { // 打包 css 里面的 img 图片
                test: /\.(png|svg|jpg|gif)$/,
                // use: [‘file-loader‘],
                 use:[
                     {
                        loader:‘url-loader‘,
                        options: {
                            name: ‘images/[name].[ext]‘,
                            //  这里limit属性的作用就是将小于8192B(8.192K)大小的图片转成base64格式,而大于这个大小的图片将会以file-loader的方式进行打包处理
                            //  如果不写limit属性,那么url-loader就会默认将所有图片转成base64
                           //  limit: 102400  

                           //  file-loader  默认使用了最新版本,返回的是 [object module] ,会导致 打包图片 失败,添加这个
                           esModule:false    
                        }
                     }
                 ]
            }     

        ]

    },   
    performance: {   //  就是为了加大文件允许体积,提升报错门栏。  

        hints: "warning", // 枚举
        
        maxAssetSize: 500000, // 整数类型(以字节为单位)
        
        maxEntrypointSize: 500000, // 整数类型(以字节为单位)
        
        assetFilter: function(assetFilename) {
        
        // 提供资源文件名的断言函数
        
            return assetFilename.endsWith(‘.css‘) || assetFilename.endsWith(‘.js‘);
        
        }        
    },  
    watch:true ,    //  时时监控

}

 

多个html打包,分别引入不同的 多个 js 文件 流程

标签:element   move   生成   源文件   ash   web   content   哈希   lap   

原文地址:https://www.cnblogs.com/star2021/p/14392682.html


评论


亲,登录后才可以留言!