最帅爸爸
posts - 139,comments - 1,views - 38143
webpack打包思路与流程解析

一：创建一个新的工程，项目初始化

npm init -y

二：搭建项目框架

 

三：编写main.js文件内容，在index.js中引入，在把index.js引入到index.html中

例：

复制代码
export default()=>{
    function computer(){
        let h2=document.createElement("h2");
        h2.innerHTML="Hello WebPack";
        return h2;
    }
    document.body.appendChild(h2);
}
复制代码

 

import h2 from "./js/main"
h2();

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="./index.js"></script>
</html>
复制代码

 

四：安装打包依赖,修改函数入口

npm i -D webpack webpack-cli

 

五：配置打包文件webpack.config.js，（还可以在packge.json中声明打包代码，方便运行）——可写可不写

复制代码
module.exports={
    //入口
    entry:["./src/index.js"],
    //出口
    output:{
        //打包后的文件路径,默认也是dist文件
        path:__dirname+"/dist",
        //文件名称,这里我用hash值来命名,防止每次打包名称重复
        filename:"[hash].js"
    },
    //配置打包环境/生产or开发
    mode:"production"
}
复制代码

 

 

 

 

六：打包成功后效果图

 

 

 

 

七：插件应用（webpack-plugins）自动引入打包好的外部文件

　　一：引入插件

　　　　npm i -D html-webpack-plugin

　　　　

　　二：在webpack.config.json文件中引入该插件并使用

复制代码
const HemlWebpackPlugin =require("html-webpack-plugin")

module.exports={
    //入口
    entry:["./src/index.js"],
    //出口
    output:{
        //打包后的文件路径,默认也是dist文件
        path:__dirname+"/dist",
        //文件名称,这里我用hash值来命名,防止每次打包名称重复
        filename:"[hash].js"
    },
    //使用html-webpack-plugin插件
    plugins:[
        new HemlWebpackPlugin({
            //模板路径
            template:"./src/index.html",
            //打包生成的文件名
            filename:"index.html",
            //指定标题
            title:"Webpack Demo",
        })
    ],
    //配置打包环境/生产or开发
    mode:"development"
}
复制代码

 

　　三：运行打包后的效果图

　　　　

 

 

八：插件应用（Ts）

　　一：编写index.ts文件

export default(x:number,y:number):number=>{
    return x+y;
}

　　二：编写tsconfig.json文件

复制代码
{
    "compilerOptions": {
        //Es的目标版本
        "target": "es2015",
        //模板化规范版本
        "module": "es2015",
        //是否总是启用严格模式
        "alwaysStrict": true
    }
}
复制代码

　

　　三：编写webpack.config.js文件并且修改packjson.js中的入口

复制代码
const HemlWebpackPlugin =require("html-webpack-plugin")

module.exports={
    //入口
    entry:["./src/index.ts"],
    //出口
    output:{
        //打包后的文件路径,默认也是dist文件
        path:__dirname+"/dist",
        //文件名称,这里我用hash值来命名,防止每次打包名称重复
        filename:"[hash].js"
    },
    //模块处理
    module:{
        //模块转换集合
        rules:[
            {
                test: /\.ts$/, //匹配所有以.ts结尾的文件
                loader:"ts-loader",//使用ts-loader的模块转换器处理
                exclude:/node_modules/ //排除掉的目录文件
            },
        ]
    },
    //模块解析处理
    resolve:{
        //解析所有以.js/.ts结尾的文件
        extensions:[".js",".ts"]
    },
    //使用html-webpack-plugin插件
    plugins:[
        new HemlWebpackPlugin({
            //模板路径
            template:"./src/index.html",
            //打包生成的文件名
            filename:"index.html",
            //指定标题
            title:"Webpack Demo",
        })
    ],
    //配置打包环境/生产or开发
    mode:"development"
}
复制代码

 

　　　　

 

　　四：运行打包效果图

　　　　

 

 

 

 

　　　　

 

九：插件应用（clean-webpack-plugin）打包后自动清理旧版本文件

　　一：引入插件

　　　　npm i -D clean-webpack-plugin

　　　　

 

　　二：编写webpack.config.js

复制代码
const HemlWebpackPlugin =require("html-webpack-plugin");
const {CleanWebpackPlugin}=require("clean-webpack-plugin");

module.exports={
    //入口
    entry:["./src/index.ts"],
    //出口
    output:{
        //打包后的文件路径,默认也是dist文件
        path:__dirname+"/dist",
        //文件名称,这里我用hash值来命名,防止每次打包名称重复
        filename:"[hash].js"
    },
    //模块处理
    module:{
        //模块转换集合
        rules:[
            {
                test: /\.ts$/, //匹配所有以.ts结尾的文件
                loader:"ts-loader",//使用ts-loader的模块转换器处理
                exclude:/node_modules/ //排除掉的目录文件
            },
        ]
    },
    //模块解析处理
    resolve:{
        //解析所有以.js/.ts结尾的文件
        extensions:[".js",".ts"]
    },
    //使用html-webpack-plugin插件
    plugins:[
        new CleanWebpackPlugin({
            //指定要删除的文件类型
            cleanAfterEveryBuildPatterns:["**/*.js"]
        }),
        new HemlWebpackPlugin({
            //模板路径
            template:"./src/index.html",
            //打包生成的文件名
            filename:"index.html",
            //指定标题
            title:"Webpack Demo",
        })
    ],
    //配置打包环境/生产or开发
    mode:"development"
}
复制代码

 

　　三：运行打包效果图（自动删除了旧版本的文件）

　　　　

 

十：插件应用（webpack-dev-server）配置服务器打包完成后自动启动页面，并且可以开启热模块替换

　　一：引入插件

　　　　npm i -D webpack-dev-server

　　　　

 

 

 　　

　　二：编写webpack.config.js文件，运行server的命令也可以打包到packjson.js中——可写可不写

复制代码
devServer:{
        //是否自动打开
        open:true,
        historyApiFallback: true,
        //是否使用热模块替换
        hot: true,
        //是否压缩
        compress: true,
        //地址
        host: "本地地址——cmd=>ipconfig查看",
        //端口
        port: 8089
    },
复制代码

 　　　　

 

 

　　三：运行打包后效果图

　　　　

 

十一：插件应用（css-loader style-loader）

　　一：引入插件

　　　　npm i -D css-loader style-loader

　　　　

 

　　二：编写css文件并且在ts中引入

body{
    background-color: bisque;
}

 

复制代码
import console from "./js/typescript";
//导入css,将把该css输出引用到js的位置
import './css/index.css'

const x:number=200;
const y:number=100;

document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`
复制代码

 

　　三：编写webpack.config.js文件

复制代码
module:{
        //模块转换集合
        rules:[
            {
                test: /\.css$/, //匹配所有以.css结尾的文件
                use:["style-loader","css-loader"],//从后向前使用loader处理指定文件
                exclude:/node_modules/ //排除掉的目录文件
            },
            {
                test: /\.ts$/, //匹配所有以.ts结尾的文件
                loader:"ts-loader",//使用ts-loader的模块转换器处理
                exclude:/node_modules/ //排除掉的目录文件
            },
        ]
    },
复制代码

　　

　　四：打包运行效果图

　　　　

 

十二：插件应用（node-sass sass-loader）

　　一：引入插件

　　　　npm i -D node-sass sass-loader

　　　　

 

　　二：编写scss文件并且在ts中引入

$color:#fff;
h1{
    color: $color;
    text-align: center;
}

 

复制代码
import console from "./js/typescript";
//导入css,将把该css输出引用到js的位置
import './css/index.css'
import './css/index.scss'

const x:number=200;
const y:number=100;

document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`
复制代码

 

　　三：编写webpack.config.js　

复制代码
rules:[
            {
                test: /\.css$/, //匹配所有以.css结尾的文件
                use:["style-loader","css-loader"],//从后向前使用loader处理指定文件
                exclude:/node_modules/ //排除掉的目录文件
            },
            {
                test: /\.scss$/, //匹配所有以.css结尾的文件
                use:[
                    {loader:"style-loader"},//将css添加到js中生产的style节点中
                    {loader:"css-loader"},//加载css
                    {loader:"sass-loader"} //把scss处理成css
                    //倒处理，从下往上
                ]
            },
            {
                test: /\.ts$/, //匹配所有以.ts结尾的文件
                loader:"ts-loader",//使用ts-loader的模块转换器处理
                exclude:/node_modules/ //排除掉的目录文件
            },
        ]
复制代码

 

　　四：打包运行后效果图

　　　　

 

十三：插件应用（mini-css-extract-plugin）建议使用该方法，要不然css全放在js中js文件太大，用户打开页面就很慢

　　一：引入插件

　　　　npm i  -D mini-css-extract-plugin

　　　　

 

　　二：编写webpack.config.js文件

const MiniCssExtractPlugin=require("mini-css-extract-plugin");　　

　　　　添加新的new MiniCssExtractPlugin()

复制代码
plugins:[
        new CleanWebpackPlugin({
            //指定要删除的文件类型
            cleanAfterEveryBuildPatterns:["**/*.js"]
        }),
        new HemlWebpackPlugin({
            //模板路径
            template:"./src/index.html",
            //打包生成的文件名
            filename:"index.html",
            //指定标题
            title:"Webpack Demo",
        }),
        new MiniCssExtractPlugin()
    ],
复制代码

　　　　替换掉所有的style.loader

复制代码
rules:[
            {
                test: /\.css$/, //匹配所有以.css结尾的文件
                use:[MiniCssExtractPlugin.loader,"css-loader"],//从后向前使用loader处理指定文件
                exclude:/node_modules/ //排除掉的目录文件
            },
            {
                test: /\.scss$/, //匹配所有以.css结尾的文件
                use:[
                    {loader:MiniCssExtractPlugin.loader},//将css添加到独立的文件中
                    {loader:"css-loader"},//加载css
                    {loader:"sass-loader"} //把scss处理成css
                    //倒处理，从下往上
                ]
            },
            {
                test: /\.ts$/, //匹配所有以.ts结尾的文件
                loader:"ts-loader",//使用ts-loader的模块转换器处理
                exclude:/node_modules/ //排除掉的目录文件
            },
        ]
复制代码

 

　　三：打包运行后的效果图

　　　　

 

十四：插件应用（html-loader）

　　一：引入插件

　　　　npm i -D html-loader

　　　　

　　二：编写webpack.config.js文件并且修改index.html以及ts文件的引入组件的方式

复制代码
rules:[
      {
        test:/\.html$/,
        use:[{
            loader:"html-loader",
            options:{
            minimize:true //是否压缩html
            }
        　}]
      }
]
复制代码

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <img src="./img/clw.jpg">
</body>
</html>
复制代码

原来的ts会把我们显示的图片给刷新覆盖掉，所以这里我们要修改一下我们的ts生产组件的代码

复制代码
import console from "./js/typescript";
//导入css,将把该css输出引用到js的位置
import './css/index.css'
import './css/index.scss'

const x:number=200;
const y:number=100;

let p=document.createElement("div");
p.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`;
document.body.appendChild(p);
复制代码

 

　　三：打包运行后的效果图

　　　　

十五：插件应用（babel用于实现浏览器的兼容性）

　　一：引入插件

　　　　npm i -D @babel/core @babel/preset-env babel-loader core-js

　　　　

 

　　二：编写webpack.json.js文件

复制代码




const HemlWebpackPlugin =require("html-webpack-plugin")




module.exports={


    //入口


    entry:["./src/index.ts"],


    //出口


    output:{


        //打包后的文件路径,默认也是dist文件


        path:__dirname+"/dist",


        //文件名称,这里我用hash值来命名,防止每次打包名称重复


        filename:"[hash].js",


        environment:{


            arrowFunction:false  //打包时不使用箭头函数,IE浏览器不识别箭头函数


        }  


    },


    //模块处理


    module:{


        //模块转换集合


        rules:[


            {


                test: /\.ts$/,


                use: [


                    {


                        loader: "babel-loader",//指定babel加载器


                        options:{ //配置选项


                            presets: [  //预置环境设置


                                [


                                    "@babel/preset-env",


                                    {


                                        "targets":{ //目标浏览器版本


                                            "chrome": "58",


                                            "ie": "11"


                                        },


                                        "corejs":"3",


                                        "useBuiltIns": "usage"


                                    }


                                ]


                            ]


                        }


                    },


                    {


                        loader: "ts-loader"


                    }


                ],


                exclude: /node_modules/


            }


        ]


    },


    //模块解析处理


    resolve:{


        //解析所有以.js/.ts结尾的文件


        extensions:[".js",".ts"]


    },


    //使用html-webpack-plugin插件


    plugins:[


        new HemlWebpackPlugin({


            //模板路径


            template:"./src/index.html",


            //打包生成的文件名


            filename:"index.html",


            //指定标题


            title:"Webpack Demo",


        })


    ],


    //配置打包环境/生产or开发


    mode:"production"


} 








复制代码







	
posted on 
 
最帅爸爸 
阅读(1696) 
评论(0) 
编辑 
收藏 
举报












    
    

    
    



    

        
    

        

            
                
                
            
        

    



    相关博文：

    

            

                ·
                TypeScript（一）基本使用
            

            

                ·
                scss的使用方法
            

            

                ·
                webpack 打包 ts
            

            

                ·
                webpack
            

            

                ·
                webpack5学习
            

    





    

    阅读排行：
    

 ·          无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
        

 ·          C#/.NET/.NET Core优秀项目和框架2025年2月简报
        

 ·          Manus爆火，是硬核还是营销？
        

 ·          终于写完轮子一部分：tcp代理 了，记录一下
        

 ·          【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
        



    

    











	

		

			




    
        

            
                

                    
                        

                            
                                <
                            
                            2025年3月
                            
                                >
                            
                        

                    
                

            		
        

    

        日
        一
        二
        三
        四
        五
        六
    

            

                            23
                            24
                            25
                            26
                            27
                            28
                    
                        1
                    
            

                

                        
                            2
                        
                            
                                3
                            
                            
                                4
                            
                            
                                5
                            
                            
                                6
                            
                            
                                7
                            
                        
                            8
                        
                

                

                        
                            9
                        
                            
                                10
                            
                            
                                11
                            
                            
                                12
                            
                            
                                13
                            
                            
                                14
                            
                        
                            15
                        
                

                

                        
                            16
                        
                            
                                17
                            
                            
                                18
                            
                            
                                19
                            
                            
                                20
                            
                            
                                21
                            
                        
                            22
                        
                

                

                        
                            23
                        
                            
                                24
                            
                            
                                25
                            
                            
                                26
                            
                            
                                27
                            
                            
                                28
                            
                        
                            29
                        
                

                

                        
                            30
                        
                            
                                31
                            
                            
                                1
                            
                            
                                2
                            
                            
                                3
                            
                            
                                4
                            
                        
                            5
                        
                

    


		
                
        

		

		
        
	






	Copyright © 2025 最帅爸爸

Powered by .NET 9.0 on Kubernetes
 Powered By博客园







    

        
 
	
    


    
    








  

  
点击右上角即可分享

  微信分享提示