webpack

本质上,webpack 是一个用于现代js应用的静态模块打包工具。当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图,然后将你项目中所需的每一个模块合成一个活多个的bundles,他们均为静态资源,用于展示你的内容

webpack的核心概念

1.入口 entry

2.输出 output

3.loader

4.插件plugin

5.模式mode

6.浏览器兼容性 brower compatibility

7.环境 envioronmrnt

###入口entry

入口七点指示webpack应该使用哪些个模块,来作为内部依赖图的开始。进入入口起点后,webpacck会找出哪些模块和库是入口起点(直接和间接)依赖的

默认值是./src/index.js 但是你可以通过webpack configuration中配置entry属性,来指定一个(或多个)不同入口的起点

moudule.exports={

entry:'./xxx/xxx/xxx.js',

}

###输出output

output属性告诉webpack在哪里输出它所创建的bundle,以及如何命名这些文件。主要输出文件的默认值是./dist/main.js 其他生成文件默认放置在./dist文件夹中

我们可以通过咋配置中指定一个output字段,来配置这些处理过程

const path = require('path')

moudule.exports={

entry:'./xxx/xxx/xxx.js',

output:{

path:path.resolve(__dirname,'dist'),

filename:'xxx.xxx.xx.js'

}

}

###loader

webpack只能理解js和json文件,这是webpack开箱可用的自带能力.loader让webpack能够去处理其他类型的文件,并将他们转换为有效模块,以供程序使用,以及被添加到依赖图中

在更高的层面,在webpack的配置中,loader有两个属性

1.test属性,识别出哪些文件会被转换

2.use属性,定义出在进行转换时应该使用哪个loader

webpack.config.js

module.exports={

output:{

filename:'xxxx.bundle.js',

},

moudle:{

rules:[{test:/\txt$/,use:'raw-loader'}],

}

}

###插件(plugin)

loader用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量

想要使用一个插件,,你只需要require(),然后把它添加到plugins数值中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同的目的而多次使用同一个插件,这时需要通过使用new操作符来创建一个插件实例

webpack.config.js

const htmlwebpackPligin =require('html-webpack-plugin');

const webpack = require('webpack')

moudule.exports={

module:{

rules:[{test:/\.txt$/,use:'raw-loader'}]

},

plugins:[new HtmlWebpackPlugin({template:'./src/index.html'})],

}

###模式mode

通过选择development priduction 或 none 之中的一个。来设置mode参数,你可以启用webpack内置在相应环境下的优化。其默认值为production

module.exports={

mode:'production',

}

###浏览器兼容性(browser compatibility)

webpack支持所有符合es5标准的浏览器(不支持ie8及以下的版本)。webpack的import()和require.ensure()需要promise。 如果你想要支持旧版的浏览器,在使用这些表达式之前,还需要提前加载polyfill

###环境environment

webpack5运行与node.js v10.13.0+版本

###入口详细版本

单个入口

用法:entry:string|[string]

webpack.config.js

module.exports={

entry:'./path/xxx/xxx/xxx.js'

},

entry属性的单个入口语法,以下是形式的简写

webpack.config.js

moudule.exports={

entry:{

main:'./path/to/my/entry/file.js'

}

}

我们也可以将一个文件路径数组传递给entry属性,这将创建一个所谓的"multi-main entry" 在你想要一次注入多个依赖文件,并且将染的依赖关系绘制在一个chunk中时,这种方式就很有用

webpack.config.js

module.exports={

entry:['./xxx/xxxx.js','./xxx/xxx.js'],

output:{

filename:'xxx.js'

}

}

对象语法

用法:entry{<entryChunkName> string | [string] } | {}

webpack.config.js

moudule.exports={

entry:{

app:'.xxx/xx.js',

adminApp:'./xxx/xx.js',

}

}

对象语法会比较繁琐。但是,这是应用程序中定义入口的最可扩展的方式

(webpack配置的可扩展是指,这些配置可以重复使用,并且可以与其他配合使用的一种流行技术,用于讲关注点从环境,构建目标,运行时中分离。然后使用专门的工具,将它们合并起来)

描述入口的对象

用于描述入口的对象。你可以使用如下属性

1.dependon 当前入口所依赖入口。它们必须在该入口加载前被加载

2.filename:知道要输出的文件名称

3.import 启动时需加载的模块

4.libray:指定libray选项,为当前entry构建一个libray

5.runtime:运行时chunk的名字。如果设置了,就会创建一个新的运行时chunk。

6.pulicpath:当该入口的输出文件在浏览器被引用时,为它们指定一个公共的url地址

output 输出

可以通过配置output选项,告知webpack如何向硬盘写入编译文件(注意:即使存在多个entry起点,但只能指定一个output配置)

用法

在webpack配置中,output属性的最低要求是,将它的值设置为一个对象,然后为将输出文件的文件名配置为一个output.filename

webpack.config.js

module.exports={

output:{

filename:'xxx.js'

}

}

(此配置讲一个单独的bundle.js文件输出到dist目录中)

多个入口起点

如果配置中创建多于一个"chunk"(例如,使用多个入口起点或者像commonsChunkPlugin这样的插件),则应该使用占位符(subsitions)来确保每个文件具有唯一的名称

moudule.exports={

entry:{

app:'./xx/xx.js',

search:'./xx/xxx.js'

},

output:{

filename:'[name].js',

path:_dirname+'/dist',

}

}

loader 用于对模块的源代码进行转换。loader可以使你在import或"load(加载)"模块时预处理文件。因此loader类似于其他构建工具中"任务(task)",并提供了处理前端构建步骤的得力方式。

loader可以将文件从不同的语言(如ts)转换成Js活将内联图像转换为data_url loader 甚至允许你直接在js模块中import css文件

可以使用loader告诉webpack加载css文件,或者将ts转换为Js.需要提前安装对应的loader

webpack.config.js

moudule.exports={

module:{

rules:[

{test:/\.css$/,use:'css-loader'},

{test:'/\.ts/,use:'ts-loader'}

],

},

};

使用loader

在你的应用程序中,有两种使用loader的方式

1.配置方式(推荐):在webpack.config.js文字中指定loader。

2.内联方式:在每个import语句中显式指定loader

configuration

module.rules允许你在webpack配置中指定多个loader.这种方式是展示loader的一种简明的方式

configuration

moudule.rules 允许你在webpack配置中指定多个loader。这种方式是展示loader的一种简明的方式,并且有助于使代码变的简洁和易于维护。同时让你对各个loader有个全局概览

loader从右到坐(或从下到上)地取值(evalute)执行(execute)。在下面的实例中,从sass-loader开始执行,然后继续执行css-loader,最后以style-loader为结束。

module.exports={

module:{

rules:[

{

test:'/\.css$/,

use:[

{loader:'style-loader'},

{

loader:'css-loader',

options:{

modules:true

}

},

{loader:'sass-loader'}

]

}

]

}

}

loader特性

1.loader支持链式调用。链式中的每个Loader会将转换应用在已处理过的资源上。一组链式的loader讲安装相反的顺序执行。链中的第一个loader将其结果(也就是应用过转换后的资源)传递给下一个loader,依次类推。最后,连中的最后一个loader,返回webpack所期望的js

2.loader可以是同步的,也可以是异步的

3.loader运行在node.js中,并且能够执行任何操作

4.loader可以通过options对象配置(仍然支持使用query参数来设置玄子昂,但是这种方式已经被废弃)

5.除了常见的通过packge.json的main来讲一个npm 模块导出为loader,还可以再modeule.rules中使用loader字段直接引用一个模块

6.插件plugin可以为Loader带来更多特性

7.loader能够产生额外的任意文件

plugin

插件是webpack的支柱功能。webpack自身也是构建中webpack配置中用到的相同的插件系统之上

插件目的在于解决loader无法实现的其他事,webpack提供很多开箱即用的插件

webpack插件是一个具有apply方法的js对象。apply方法会被webpack compiler调用,并且在整个编译生命周期都可以访问compiler对象

consolelogonbuildwebpackplugon.js

const pluginname ='xxxxx'

class consoleOnBuildWebpackPlugin{

apply(compiler){

compiler.hooks.run.tap(pluginname,(compilation)=>{

xxxx

}

}

}

用法

由于插件可以携带参数、选项,你必须在webpack配置中,向plugins属性传入一个new实列。取决于你的webpack用法,对应有多种使用插件的方式。

相关推荐
阿垚啊18 分钟前
vue事件参数
前端·javascript·vue.js
过去式的美好2 小时前
vue前端通过sessionStorage缓存字典
前端·vue.js·缓存
Simaoya2 小时前
vue判断元素滚动到底部后加载更多
前端·javascript·vue.js
头顶一只喵喵2 小时前
Vue基础知识:Vue3.3出现的defineOptions,如何使用,解决了什么问题?
前端·javascript·vue.js·vue3
黑色的糖果2 小时前
echarts横向立体3D柱状图
前端·javascript·echarts
茶卡盐佑星_3 小时前
vue3.0所采用的composition Api与vue2.x使用的Option Api有什么区别
前端·javascript·vue.js
乐安lan3 小时前
01前端导入
前端
lauo3 小时前
【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第55课-芝麻开门(语音 识别 控制3D纪念馆开门 和 关门)
前端·javascript·人工智能·3d·机器人·开源·语音识别
2401_857622663 小时前
探索 WebKit 的动感世界:设备方向和运动支持全解析
前端·webkit
开源博客3 小时前
Vue3 如何接入 i18n 实现国际化多语言
前端·vue·i18n·vite