weback准确来说是一个模块打包方式,它能自动识别如ES modulu 、commonJS 、 AMD 、CMD这样的模块导出方式,但是对于高级的一些加载方式并不能识别。webpack在最初时只能打包js文件件,后来能打包css,less等文件
webpack的两种安装方式,全局安装
- 全局安装,一般情况下,当安装webpack-cli时,会自动的给安装上webpack 使用
npm install webpack webpack-cli -g 完成全局安装,此时如果安装可在全局使用webpack -v 查询当前的版本号
- 局部安装,npm install webpack webpack-cli --save-dev 或者使用npm install webpack webpack-cli -D 进行安装 此时需要使用npx webpack -v才能查询当前的版本号,此时的npx表示能够在node_module文件夹中去找寻这个模块
使用npm info webpack即可查询当前webpack的所有版本
-
全局安装webpack时,可以使用webpack 文件名 进行打包
-
局部安装时,使用npx webpack 文件名 进行打包
-
在package.json文件中,配置命名,在script文件指令中,配置buldle命令,其属性值为webpack,在此时不用写为npx webpack 因为此时在打包的过程中会自动找到当前目录下的node_modules
在使用webpack加文件名时,此时使用的是webpack的默认配置文件,要想按照制定的内容进行打包,需要进行指定的配置
-
webpack.config.js为webpack的配置文件夹,在里面可以写配置文件
-
如果将默认配置文件夹的名字改为其他文件名,则需要使用npx webpack --config 其他的文件名。
下面所举例的就是写的一个简单的配置文件中的内容
const path = require(‘path’);
module.exports = {
mode: “production”,
entry:{
main: “./src/index.js”
},
output: {
filename: ‘buldle.js’,
path: path.resolve(__dirname, ‘dist’)
}
}
在上面文件中需要做一下几点的说明,即上面配置文件中配置参数的说明
-
mode,表示打包的生成的文件是否为压缩,默认情况下默认的参数是production,此时表现形式为压缩形式当参数为development时,此时表现形式为非压缩形式。这两种的区别在于其打包生成的文件的大小不同,如果是上线就选择development模式,其他情况就两种都可以,看自己的需求。这就好比于你在用jq的时候,如果你想到jq的源码就选择非压缩版,如果你需要上线就选择压缩版
-
entry,表示项目的入口文件,其中的main表示的就是你的入口文件名,打个比方说如果你所有的模块全部按需加载,都需要引入到你当前的入口文件中,这样webpack才能找到你所有需要打包的模块
-
output,表示的就是你打包生成的出口文件,其中的filename表示你打包生成的文件名的名称,而path表示的就是你当前生成文件所需要放在的文件夹的名。在这里使用到的path.resolve(__dirname, 文件名)这关就是一种找寻路径的方式,在nodeJs中内置了一个path的对象,在这个对象中你可以通过resolve方法找到路径,其中的__driname表示的是当前文件的根目录下
为什么会使用webpack-cli这个依赖包,该依赖包的作用是用于使得webpack这个命名能够在命令行使用
-
Hash 表示项目的唯一Hash值 Version表示webpack版本号 Time表示打包时间 Asset表示打包生成文件名
-
chunk中放入的是每一个js文件对应的Id值 chunk Names 表示入口文件的的main参数
loader,翻译模板,对于webpack而言在没有配置时,默认打包的只能是js文件,如果想要去打包其他的文件形式,这里的其他文件形式包括less,sass,css等文件,就需要在webpack.config.js文件中去配置。
file-loader能够打包字体静态资源文件
-
作用:能够打包静态文件,如图片文件打包,使用url-loader能够打包所有file-loader打包的静态文件
-
区别:url-loader比file-loader多了一个limit配置参数,如果打包的静态文件大于这个配置参数,就会将其打包到一个文件夹中,如果小于配置参数的容量就会被打包到生成的js文件当中
这两个loader的作用是对于css文件进行模板翻译,翻译的时候需要这两个loader,其中css-loader的作用时查看多个css文件之间的关系,style-loader文件的作用是渲染样式在页面上,需要注意的是,这两者的顺序是不够颠倒的,在这个过程中满足从右到左,从下到上的原则,使用方式参照https://webpack.js.org/loaders/sass-loader/
作用:对于scss文件进行模板翻译,翻译的时候需要三个loader,从左到右分别为style-loader, css-loader ,sass-loader,表示的含义:先进行scss文件翻译,然后是css文件翻译,最后是渲染到页面上。与之类似的还有less-loader
css-loader中的importLoadersd与modules
-
importLoadersd,该参数的参数值为2时,表示允许scss文件中的import导入
-
modules,该属性的表现方式该文件为局部样式而不是全局样式,在这时导入的样式文件名为style
loader中涉及到的webpack.config.js中配置文件的形式如下
对于loader的使用如同下面配置文件,在rules下增加loader,rules中存放的是数组,数组中存放的就是需要一个个对象,对象中test属性用于匹配文件,use表示使用何种规则
const path = require(‘path’);
module.exports = {
mode: “production”,
entry: {
main: “./src/index.js”
},
module: {
rules: [
{
test: /.(png|jpg)$/,
use: [
{
loader: ‘url-loader’,
options: {
name: ‘[name]_[hash].[ext]’,
outputPath: ‘images’,
limit: 40210 }
}
]
},{
test: /.scss$/,
use: [
‘style-loader’,
{
loader: ‘css-loader’,
// options: {
// importLoaders: 2,
// modules: true
// }
},
‘sass-loader’
]
},{
test: /.(eot|ttf|woff|woff2)$/,
use:{
loader: ‘file-loader’
}
}
]
},
output: {
filename: “[name].js”,
path: path.resolve(__dirname, “dist”)
}
}
对于plugin可以这样来理解,webpack在运行到某个时候,帮你做的一些事情。这就好比在vue或者是react中的生命周期函数一样,在组件加载在某个时刻就执行对应的生命周期函数
-
在使用之前需要引入依赖包,引入依赖包可以通过npm或者是yarn来引入。
-
插件作用,会帮助生成一个html文件,并将打包好的js文件自动添加到这个html文件中,但是默认生成的html模板里面没有任何的结构,因此在使用时,需要引入自己定义好的html文件模板,此时只需要在实例中,传入一个实例对象,对象的属性名为template,属性值为文件的路径。需要注意的是,该插件运行的时间是在webpack打包完成之后才进行
-
插件引入方式,在使用之前需要引入依赖包,引入依赖包可以通过npm或者是yarn来引入
-
插件作用,会在打包之前,去清除掉之前打包好的文件,在官方引入中引入的方式的方式是通过import {} from ‘’;的方式,在实例化的过程中也不需要去传入文件名的参数
关于output与entry在上面已经说过了,在这里需要对entry的两个配置参数做说明
对于entry这个参数,其对应的的属性值有两种传入参数的方式
-
如果传入的是单个文件,此时该参数可以是字符串,如果output中的传入的对象没有配置时,此时输出打包后的文件名为main.js;如果使用了filename这个属性,那么最后打包输出的名称为filename的属性值。
-
如果入口文件是两个及其以上,那么配置entry的参数的属性值,为一个对象,在该对象的内部传入的属性,与属性值分别代表的意思就是打包后生成的文件的文件名,以及打包的入口地址,那么与此对应的output中,filename的属性值,就可以写成[name].js或者用[hash]_[name].js等方式,来说明有多个文件的引入
publicPath参数说明
该参数表示生成的打包好的文件,可以在一个相同域名下的文件中,如: ‘http://cdn.com.cn’,则此时就需要在output中新增publicPath: ‘http://cdn.com.cn’,在这里需要注意下,使用该参数时不能乱用,否则会出现路径错误
-
sourceMap的作用,用于去检测打包生成后的bug检测,其表示一种映射关系,用于指出产生错误的源文件的位值
-
devtool参数的说明
-
none:能够指出打包生成后的文件的错误代码的位置,但是不能指出源文件出错代码的错误
-
source-map: 能够找出源文件错误,但是会生成.map的文件
-
inline会将.map文件嵌入到打包生成的文件
-
module能够映射出模块、插件等这些依赖包中的问题
-
cheap 不会精确到列中的错误
-
eval 包裹模块代码
-
通常情况下各环境中推荐的参数
-
production下使用devtool: ‘cheap-module-eval-source-map’
-
development下使用devtool: ‘cheap-module-source-map’
对于webpack自动启动服务的方式有三种方式,如下所示
-
在webpack中的script下配置webpack --watch参数,但是这样做的不能实现自动刷新
-
使用devServer,能够启动界面,并且能完成自动刷新,并且启动时是在http协议下,即本地的服务器启动,此时需要在script下配置webpack-dev-server,同时还需要安装webpack-dev-server这个依赖。devserver的参数说明
-
contentBase用于指明打包生成的文件的位置
-
port用于说明启动端口的位置,默认指的是8080
-
proxy用于指明,当转到某个路由时,自动跳转到某个地址
-
使用node手动配置devserver,使用webpack-dev-middleware中间件启动
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料分享给大家,戳这里即可领取
里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料分享给大家,戳这里即可领取
[外链图片转存中…(img-tPldDquK-1712986130100)]