webpack

Webpack是一款流行的前端资源构建工具,支持模块化开发方式,并能转换、合并、压缩代码。本文详细介绍Webpack的安装配置流程,包括核心属性、插件使用及对JS、CSS、SCSS和图片等静态资源的处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webpack

概念

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

webpack 是一个开源的前端包工具。webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 要使用 webpack 前须先安装 node.js。

作用:

1 转换:把浏览器不能识别的代码转成你能够识别的代码(scss--》css,ts--》js)
2 合并:将同类文件进行合并(文件个数变少)
3 压缩优化代码:将代码进行压缩 (项目体积变小、高级语法--》低级语法)
4 提供了一个思想:  模块化思想  (自由组合--html可以自由引入js/css)


核心属性:

项目根目录必有一个配置文件: webpack.config.js

module.exports={
	 mode:"",  //设置开发模式/生产模式
	 entry:{}, //配置js的入口
	 output:{}, //配置js的出口
	 plugins:[],//插件配置、加载
	 module:{},//规则
	 devServer:{}//服务器相关(前端跨域)
}

创建项目

1 新建目录
2 初始化  npm init -y
3 局部下载安装核心插件   npm i webpack webpack-cli -D
-D 会下载到devDependencies中,没有加是下载到Dependencies
Dependencies中的插件打包后依然还有
devDependencies中的插件不会被打包
4 在项目下新建src目录(该目录就是写源码的地方)
5 在项目根目录新建配置文件: webpack.config.js

1 配置 模型、js入口、js出口(mode、entry、output)

//引入path
let path=require('path')

module.exports={
    //production 生产版
    //development 开发版
    mode:"production",
    //js入口,需要打包的js
    // 自定义名字:需要打包的js路径
    entry:{
        login:'./src/js/login/login.js',
        register:'./src/js/register.js'
    },
    //js出口,被打包到哪个地方  dist
    output:{
        //配置出口目录dist
        path:path.resolve(__dirname,"dist"),
        //配置出口文件名字 [name] 能够动态根据js入口配置的自定义名字生产js文件名
        filename:"js/[name].js",
       
    }

}

打包命令:

npx webpack

2 配置html (plugins)

2.1 下载安装插件

npm i html-webpack-plugin -D

2.2 配置

//引入path
let path=require('path')
//引入html插件
let HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
    //production 生产版
    //development 开发版
    mode:"production",
    //js入口,需要打包的js
    // 自定义名字:需要打包的js路径
    entry:{
        user:'./src/js/user/user.js'
    },
    //js出口,被打包到哪个地方  dist
    output:{
        //配置出口目录dist
        path:path.resolve(__dirname,"dist"),
        //配置出口文件名字 [name] 能够动态根据js入口配置的自定义名字生产js文件名
        filename:"js/[name].js",
       
    },
    //配置页面
    plugins:[
        getHtmlWebpackPlugin("user"),
    ]
}

//封装
function getHtmlWebpackPlugin(name){
    return new HtmlWebpackPlugin({
        //页面引入哪些js文件,数组中需要引入入口配置k
        chunks:[name],
        //需要打包的html
        template:`./src/html/user/${name}.html`,
        //打包的路径
        filename:`html/${name}.html`
    })
}

3 配置 css (module)

css只能跟着js走(寄生):如果a.html中引入了a.js,则只能在a.js中引入需要的css

3.1 局部下载安装插件

npm i mini-css-extract-plugin css-loader style-loader -D
css-loader :核心插件
mini-css-extract-plugin  :打包成外部样式
style-loader :打包内部样式

3.2 配置 内部样式

module:{
        rules:[
            //内部样式:
            {
                //匹配需要打包的css i代表的忽略大小写
                test:/\.css$/i,
                //使用加载器
                use:["style-loader","css-loader"]
            }
        ]
    }

3.3 配置外部样式

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

module:{
        rules:[  
            //外部样式
            {
                test:/\.css$/i,
                use:[MiniCssextractPlugin.loader,"css-loader"]
            }
        ]
    }

4 配置scss

4.1 下载插件

npm i sass-loader -D
npm i node-sass -D     (可能会报错,资源在国外)

4.2

内部样式

    module:{
        rules:[
            {
                test:/\.scss$/i,
                use:["style-loader","css-loader","sass-loader"]
            }
            
        ]
    }

外部样式

plugins:[
      
        //外部样式打包出口
        new MiniCssextractPlugin({
            filename:"css/[name].css"
        })
    ],
    module:{
        rules:[

             {
                test:/\.scss$/i,
                use:[MiniCssextractPlugin.loader,"css-loader",'sass-loader']
            }
        ]
    }

5 配置图片

1 <img  src =""
2 css中的 background-image:url()

5.1 安装插件

npm i url-loader file-loader html-withimg-loader -D
 file-loader:核心插件
 url-loader:css背景图
 html-withimg-loader:页面中img标签
 
 

5.2 配置

    module:{
        rules:[
            //内部样式:
            {
                //匹配需要打包的css i代表的忽略大小写
                test:/\.css$/i,
                //使用加载器
                use:["style-loader","css-loader"]
            },
            {
                test:/\.scss$/i,
                use:["style-loader","css-loader","sass-loader"]
            },

            // css中的背景图
            {
                test:/\.(png|jpg|jpeg|gif)$/i,
                use:[{
                    loader:"url-loader",
                    options:{
                        //如果图片大小<=8KB,则转成base64格式,性能优化
                        limit:1024*8,
                        //打包到dist/img中
                        outputPath:"./img",
                        //解决最新版兼容问题
                        esModule:false 
                    }
                }]
            },
            //img中的图片
            {
                test:/\.html$/i,
                use:['html-withimg-loader']
            }
        ]
    }

注意:降低css-loader版本为5.2.6:

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

6 配置服务器(devServer)

6.1 下载插件

npm i webpack-dev-server -D

6.2 打包+开服

打包:只会在内存中打包(并不会生产dist)

npx webpack serve

6.3 访问

http://localhost:8080/已进入dist根目录的
http://localhost:8080/html/user.html

6.4 其他配置

    devServer:{
        port:8000,
        //自动打开浏览器
        // open:true,
        //支持热更新 
        hot:true
    }

6.5 前端跨域 使用代理(只能用于开发环境)

proxy:底层会在开发环境中创建一个代理服务,做ajax的转发(如果打包上线,则失效)

    devServer:{
        port:8000,
        //自动打开浏览器
        // open:true,
        //支持热更新 
        hot:true,
        proxy:{
            "/users":{
                //要代理的地址
                target:'http://localhost:3000'
            },
            "/stus":{
                target:'http://localhost:3000'
            }
//以后通过ajax访问的地址:
// url:"/users"     ====>  url:"http://localhost:3000/users"

webpack中使用jquery

js:


import  $ from '../../js/jquery.min.js'   (webpack底层会改变jquery的源码,从return 改为  export default ..)


$(function(){
    $("#login").click(function(){
        $.ajax({
            url:"http://localhost:3000/users/login",
            data:{
                username:$("#username").val(),
                password:$("#password").val()
            },
            success(res){
                if(res.code==200){
                    alert("ok")
                }
            }
        })
    })
})


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值