webpack

最新推荐文章于 2025-12-10 14:40:34 发布

原创最新推荐文章于 2025-12-10 14:40:34 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #javascript

webpack

概念

前端资源构建工具 / 前端打包工具

它做的事情：
    1 把代码进行压缩 (jquery.js--->jquery.min.js)
    2 合并 （把多个js合并成一个js）
    3 转换(scss-->cs,ts---》js,es6-->ES5)
买点：模块化思想 （复用性）
  他把每一个资源(html、css、js)都当成一个模块,模块之间是可以在自由组合（通过配置文件进行组合）

核心属性：

webpack.config.js:

module.exports={
    mode:"开发/生产模式",
    entry:{打包js入口}
    output:{打包js的出口},
    plugins:[插件加载],
    module:{
        //规则
        rules:[]
    },
    devServer:{
        //前端服务器,前端跨域
    }
    
    

}

前置：

步骤1：

局部下载安装核心插件
npm i webpack webpack-cli -D

-D：代表的是所下载的插件不会被打包(打包之后是不含该插件的)
打包前：叫做开发版
打包后：叫做生产版(上线)
普通下载列表：

 "dependencies": {
    "jquery": "^3.6.1"
  }
  
-D下载列表
  "devDependencies": {
    "multer": "^1.4.5-lts.1"
  }

步骤2：

在项目的根目录新建src目录，我们以后的源码全部放在该目录中

步骤3：

在项目的根目录新建  webpack.config.js  配置文件,编辑：


module.exports={
    

}

打包命令：

npx webpack

打包js

webpack默认只能打包js

let path=require("path")
module.exports={
    // mode:"production/development"
    //打包模式
    mode:"production",
     //打包入口
    entry:{
        //自定义属性:"js的路径"
        login:"./src/user/login/login.js",
        register:"./src/user/register/register.js"
    },
    //打包出口
    output:{
        // path:"C:/83/code1/webpack_83/dist"
        path:path.resolve(__dirname,"dist"),
        //  [name]是关键词，代表动态
        filename:"js/[name].js"      
    }
}

注意：

1  如果某个模块中有多个js，比如login模块有login.js、a.js、b.js,则我们无需把三个js都打包，而是选择用login.js引入其他两个js，最终只需要打包login.js即可

2 webpack可以让我们使用import命令时不用写后缀.js

打包html

1 局部下载插件

npm i html-webpack-plugin -D

2 配置

let path=require("path")

//页面插件
let HtmlWebpackPlugin =require('html-webpack-plugin')


module.exports={
    // mode:"production/development"
    //打包模式
    mode:"production",
     //打包入口
    entry:{
        //自定义属性:"js的路径"
        login:"./src/js/user/login/login.js",
        register:"./src/js/user/register/register.js",

    },
    //打包出口
    output:{
        // path:"C:/83/code1/webpack_83/dist"
        path:path.resolve(__dirname,"dist"),
        //  [name]是关键词，代表动态
        filename:"js/[name].js"      
    },
    //插件
    plugins:[
        // new HtmlWebpackPlugin({
        //     //当前页面引入哪些js文件
        //     chunks:['login'],
        //     //打包html的入口
        //     template:"./src/html/user/login.html",
        //     //打包html的出口
        //     filename:"html/login.html"
        // }),
        getHtmlWebpackPlugin('login'),
        getHtmlWebpackPlugin('register')
    ]
}

function getHtmlWebpackPlugin(name){
    return new HtmlWebpackPlugin({
        //当前页面引入哪些js文件
        chunks:[name],
        //打包html的入口
        template:`./src/html/${name}.html`,
        //打包html的出口
        filename:`html/${name}.html`
    })
}

补充：打包前自动删除dist目录插件

下载：

npm i clean-webpack-plugin -D

配置：

//引入清理插件
let {CleanWebpackPlugin}=require('clean-webpack-plugin')
   
   
 plugins:[   
     //清理插件
     new CleanWebpackPlugin()
 ]

打包css

下载插件

npm i mini-css-extract-plugin  css-loader  style-loader -D

 css-loader:核心插件
 mini-css-extract-plugin： 外部样式
 style-loader 内部样式
 
 外部样式和内部样式，只能选择一个

切记：

样式css必须在某个js文件中引入

1 内部样式：

    //模块以及规则
    module:{
        rules:[
            //内部样式规则
            {
                //匹配的文件才会被打包
                test:/\.css$/i,
                //使用
                use:['style-loader','css-loader']
            },
        ]
    }

2 外部样式：

//引入外部css插件
let MiniCssExtractPlugin=require('mini-css-extract-plugin')


 plugins:[
      

        //外部css插件
        new MiniCssExtractPlugin({
            //打包的出口
            filename:"css/[name].css"
        })
    ],
    
    
module:{
        rules:[                 
            //外部样式规则
            {
                //匹配的文件才会被打包
                test:/\.css$/i,
                //使用
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },

        ]
    }

打包scss (得基于css的插件和相关配置)

1 下载

npm i sass-loader  -D
npm i node-sass -D   资源在国外，如果失败，多操作几遍

内部样式

                      
    module:{
        rules:[                 
            //外部样式规则

            {
                //匹配的文件才会被打包
                test:/\.scss$/i,
                //使用
                use:['style-loader','css-loader','sass-loader']
            },

        ]
    }

外部样式

                       
    module:{
        rules:[                 
           //scss外部样式
            {
                //匹配的文件才会被打包
                test:/\.scss$/i,
                //使用
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
            },

        ]
    }

打包图片（依赖css配置和插件）

情况

1 标签：<img src=""
2 css:background-image:url('')

下载插件

npm i url-loader file-loader html-withimg-loader -D

注意：

需要降低css-loader 版本为 5.2.6


npm uni css-loader
npm i css-loader@5.2.6 -D

配置：

module:{
        rules:[


            //css图片
            {
                test:/\.(jpeg|png|jpg|gif)$/i,
                use:[{
                    loader:"url-loader",
                    options:{
                        //图片<8kb则会自动转成base64字符串
                        limit:1024*8,
                        //大于8kb的图片的出口
                        outputPath:"./img",
                        //解决最新版bug
                        esModule:false
                    }

                }]
            },

            //html标签图片 依赖css配置
            {
                //匹配哪些页面
                test:/\.html$/i,
                use:["html-withimg-loader"]
            }

        ]
    }

devServer服务器

1 下载插件

npm i webpack-dev-server -D

2 使用：

打包:npx webpack
打包+开服： npx webpack serve
解释打包：只会打包到内存，不会真正的打包到dist硬盘---用于开发

3 特点：

热更新，方便程序员，增加了开发效率

4 其他配置

 devServer:{
        //改变端口
        port:8888,
        //自动打开浏览器
        open:true,
        //热更新
        hot:true,
        //前端处理跨域,内嵌一个代理服务器
        proxy:{
            // "/标识":{target:"代理的地址"}
            // "/stus":{
            //     target:"http://localhost:3000"
            // },
            // "/clas":{
            //     target:"http://localhost:3000"
            // },
            // "/users":{
            //     target:"http://localhost:3000"
            // },

             "/":{
                target:"http://localhost:3000"
             },

            /*
                1 在ajax中的url必须以/stus开头，代理才能生效
                2  /stus  ---相当于----   http://localhost:3000/stus
                 /stus/getStus  ---相当于----  http://localhost:3000/stus/getStus
            */
        }

    }

5 使用jquery

//引入jquery
import $ from '../../jquery.min.js'
//自己的业务
$("#btn").click(function(){
    $.ajax({
        url:"/stus/getStus",
        success(res){
            console.log(res);
        }
    })
})

面试题：webpack属性的理解

1 mode   设置开发/生产模式
2 entry  js入口
3 output js出口
4 plugins  打包页面、外部css的插件
5 module  样式（scss、css）、图片的规则  --->匹配正则+使用xx加载器
6 devServer 内嵌服务器,自己开服不依赖其他服务器,核心解决前端跨域

npx webpack  -->打包
npx webpack serve  --》开服