webpack打包多個js 合並成默認 main.js文件步驟

1. 這種方式，把多個 js 自動打包成默認的  main.js ，直接在 dist 文件夾里面，和生成的 html 文件同級

2. 而且，html 插件里，沒有引入也會自動引入 js ，而且還添加版本號

 

webpack.config.js 配置如下:

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 插件    ， 新版本都采用這個

module.exports={
   // mode:"development" ,   //開發模式，沒有對js等文件壓縮，默認生成的是壓縮文件
    mode : 'production' ,  
    entry:[
        './htmlDist/cn/js/A.js',
        './htmlDist/cn/js/B.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({   //  打包 cn-index.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({   //  打包 cn-index.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/a'],     //需要引入的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 ,    //  時時監控

}

 

入口的js 內容如下：

import '../css/A.css'  
console.log('打包A.js文件的內容');

 

引入的css 內容如下：

p{
    color:pink;border:1px solid red;line-height: 30px;font-size:26px;color:blue;
}

運行 npm run build 即可


注意：

在注冊html 插件時候，不特意使用下面這個屬性，打包后的頁面，就可以自動引入 生成后的 main.js 文件

chunks:['js/a'],

 

 

 打包js 文件時候，要注意, 把匿名函數變成變成寫法，否則容易報錯，如下：

 

正常代碼：

function fn(){

}

要變成如下代碼：變成全局變量的形式

// 保留有效數字
window.fixNuberByNeed = function (cross_secion){
    .......
}