文章目录
- webpack工程化项目
- 1.初始化配置文件
- 1.创建一个文件夹(名称为英文名,否则报错)
- 2.在文件夹执行命令:npm init -y(会发现多了个package.json文件)
- 3.在文件夹新建src文件,并在里面创建index.html和index.js文件(文件名和路径不能错,这是webpack默认打包的文件名,详情解释和改动看下面的“修改打包的默认约定”)
- 4.在index.html里面初始化首页结构(布局HTML),我的结构为
- 5.安装jquery,运行npm install jquery -S
- 发现又多了个json文件,打开package.json,会发现多了![在这里插入图片描述](https://img-blog.csdnimg.cn/ac641a304352476da7615a3b05da53d2.png#pic_center)
- 6.使用ES6语法,在js里面导入jQuery(import xxx from "jquery"),例如(import $ from "jquery"),我的js为
- 7.导入后就可以在js里面写jq代码了,最后别忘了导入html
- 8.运行后发现并没有实现我想要的奇偶行变色效果,并且报了个错
- 9.可以发现我们写的代码并没有被浏览器所兼容,这个时候就需要webpack来解决这个问题
- 安装和配置webpack
- 安装webpack
- 配置
- 在项目中配置
- 1.在项目根目录中,创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置(加入下面代码):
- 2.在package.json的 scripts节点下,新增dev脚本如下(test脚本没啥用,可以删掉):
- 3.在终端中运行npm run dev(这个dev为可选值,具体以script节点下脚本名为准)命令,启动webpack进行项目的打包构建
- 4.运行完会发现目录多了个dist文件夹,里面有个main.js文件,这个文件就是webpack根据index.js代码进行监听的处理自动生成的,使之前不兼容的代码变得与浏览器有兼容性
- 5.把index.html引入的index.js注释掉,换上自动生成的main.js,在index.html中就引入main.js就可以了
- 6.在index.html中运行项目,可以发现之前的奇偶行变色效果出来了,控制台也没有任何报错,兼容性问题成功被解决
- 以上六大步骤已经安装完webpack项目,下面是拓展知识
- 了解mode可选值的使用场景
- 安装和配置webpack-dev-server这个插件
- 安装html-webpack-plugin插件
- devServer中常用的选项
- loader的使用
- 配置build命令
- 优化运行项目生成的图片和js文件的存放路径
- 配置和使用clean-webpack-plugin插件自动删除dist自录
- 开发模式下如何配置SourceMap
webpack工程化项目
1.初始化配置文件
1.创建一个文件夹(名称为英文名,否则报错)
2.在文件夹执行命令:npm init -y(会发现多了个package.json文件)
3.在文件夹新建src文件,并在里面创建index.html和index.js文件(文件名和路径不能错,这是webpack默认打包的文件名,详情解释和改动看下面的“修改打包的默认约定”)
4.在index.html里面初始化首页结构(布局HTML),我的结构为
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
</ul>
</body
5.安装jquery,运行npm install jquery -S
-S 是–save的简写,将包装在–save节点下,这个节点(就是package.json里面的dependencies)下的包项目上线或部署,会将需要的包放到这个节点下
发现又多了个json文件,打开package.json,会发现多了![在这里插入图片描述](https://img-blog.csdnimg.cn/ac641a304352476da7615a3b05da53d2.png#pic_center)
6.使用ES6语法,在js里面导入jQuery(import xxx from “jquery”),例如(import $ from “jquery”),我的js为
// 使用ES6导入jQuery
import $ from "jquery"
//定义jquery的入口函数
$(function(){
//实现奇偶行变色
//奇数行为红色
$("li:odd").css("background-color","red")
$("li:even").css("background-color","red")
})
7.导入后就可以在js里面写jq代码了,最后别忘了导入html
8.运行后发现并没有实现我想要的奇偶行变色效果,并且报了个错
9.可以发现我们写的代码并没有被浏览器所兼容,这个时候就需要webpack来解决这个问题
安装和配置webpack
安装webpack
在终端运行如下的命令,安装webpack相关的两个包并指定版本号:
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
-D是–save-dev的简写, 将包装在–save-dev节点下,这个节点(就是package.json里面的devDependencies)下的包只在开发时使用,项目上线或部署,会将不需要的包放到这个节点下
打开package.json,会发现多了
配置
在项目中配置
1.在项目根目录中,创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置(加入下面代码):
//使用node.js中的导出语法
module.exports={
//mode代表开发的模式,可选值有两个开发模式development和生产模式production(比如压缩版本的代码)
mode:"development"
}
2.在package.json的 scripts节点下,新增dev脚本如下(test脚本没啥用,可以删掉):
"scripts": {
"dev":"webpack" //dev不是固定的,只要后面的值为webpack就可以。另外script节点下的脚本,可以通过npm run执行。例如npm run dev(这个dev为可选值,具体以script节点下脚本名为准)
},
3.在终端中运行npm run dev(这个dev为可选值,具体以script节点下脚本名为准)命令,启动webpack进行项目的打包构建
4.运行完会发现目录多了个dist文件夹,里面有个main.js文件,这个文件就是webpack根据index.js代码进行监听的处理自动生成的,使之前不兼容的代码变得与浏览器有兼容性
(建议每次运行项目如果有新增的文件之类的,把这个dist文件夹删除,不然之前的文件会依然存在,如果同位置同名就没事,不用删除,后面的会覆盖之前的)
5.把index.html引入的index.js注释掉,换上自动生成的main.js,在index.html中就引入main.js就可以了
6.在index.html中运行项目,可以发现之前的奇偶行变色效果出来了,控制台也没有任何报错,兼容性问题成功被解决
以上六大步骤已经安装完webpack项目,下面是拓展知识
7.运行成功后可以发现main.js,是把jQuery源代码文件和index.js写的jQuery代码文件合并成的一个main.js
了解mode可选值的使用场景
可选值有两个开发模式development和生产模式production(比如压缩版本的代码)
开发模式下,运行项目会发现
大小为325kib,耗时300ms运行出来
生产模式下运行项目会发现
大小为88.5kib,耗时1852ms才运行出来
两者区别
开发模式中的代码都是有格式有规律的,每次换行每个空格都占空间,生产模式则将代码进行压缩减少体积,在打包压缩的过程,耗时长,开发模式下不需要等太长时间,因此两者区别是,开发模式代码体积大耗时短,生产模式代码体积小耗时长,在这个项目里,生产模式和开发模式的打包压缩代码都是指的main.js的体积
修改打包的默认约定
index.js是webpack默认打包的文件名,默认路径为src=>index.js,运行时默认输出路径为dist=>main.js。正常情况下,不能改动路径和名字,那么怎么可以去修改打包的默认约定呢?
自定义打包的入口与出口
在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口。示例代码如下:
//导入node模块
const path = require("path")
//使用node.js中的导出语法
module.exports = {
//mode代表开发的模式,可选值有两个开发模式development和生产模式production
mode: "production",
// entry:"指定要处理哪个文件"
//path是node的一个模块,需要导入node模块
//__dirname:"代表项目根目录,后面需要拼接具体路径"
entry: path.join(__dirname, './src/index1.js'),//被处理文件的路径相当图index.js
//指定生成的文件要存放到哪里?
output: {
path: path.join(__dirname, "./dist1"),//输出文件存放路径
filename: "bundle.js"//生成文件名称
}
//打包输出文件的路径,第一个为存放的文件夹名称,相当于list路径,第二个为生成的文件名,相当于main.js
}
这样就可以自定义修改文件名和路径了
安装和配置webpack-dev-server这个插件
插件的作用:每当修改了源代码,webpack 会自动进行项目的打包和构建
安装运行命令:
npm install webpack-dev-server@3.11.2 -D
配置webpack-dev-server:
1.修改package.json -> scripts中的dev命令如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve" //在dev里面加个serve即可
},
2.再次运行npm run dev命令,重新进行项目的打包
运行发现
无法加载“@webpack cli/service”命令,未下载@webpack cli/service,则下载webpack cli ( i是 install的简写,-D与 --save-dev的简写,安装包写入 devDependencies(开发环境)中)
下载webpack cli命令
npm i --save-dev webpack-cli
再次执行npm, run dev
运行成功,解决问题(但此时还是不能正常刷新,继续往后看)
注意:webpack-dev-server会启动一个实时打包的 http服务器
这里的虚拟目录统一代表为内存,因为这些文件没有被显示出来,而是被加载到了内存中,后面所有的虚拟目录也都代表内存中
上面这个服务器地址和虚拟目录要切记,下面要用到
这时候直接访问终端提供的服务器地址会发现
浏览器会展示我整个项目目录
(下面是idea的目录)
所以,只需要点击浏览器的src文件就可以默认访问里面的index.html文件了,因此
但是这时还是没有更新我的代码(背景颜色没动静)
这时候就可以在浏览器访问下我上面说的命令行打包的虚拟目录
根据上面我的目录结构可以看到bundle.js并不是我的根目录,但是可以直接访问到,所以这是webpack打包时默认创建的虚拟目录
这时,既然明白这个虚拟目录的概念了,那么我们的html页面也就应该引入我们的虚拟目录bundle.js,因为只有这个虚拟目录文件里面才是我们实时更新的文件
可以直接在html里面直接引用即可
最后再次访问src文件夹,发现效果出来了,而且也是实时刷新的
至此,插件全部安装完毕.
安装html-webpack-plugin插件
上面安装的实时更新插件,访问http://localhost:8080/会发现是如下结构
对于程序员来说,每次访问项目都要点一下很麻烦的,例如,点进src目录,自动进入index.html文件,同理,若是能把src的index.html文件复制一份到根目录下,是不是当访问这个地址时就能直接进入index.html了呢?答案是肯定能,因此,这个html-webpack-plugin插件,就可以用来解决这些问题
安装插件
npm install html-webpack-plugin@5.3.2 -D
在webpack.config.js配置文件中,配置html-webpack-plugin插件
//1.导入html插件,得到一个构造函数
const HtmlPlugin=require("html-webpack-plugin")
//2.创建html-webpack-plugin插件的实例对象
const htmlPlugin=new HtmlPlugin({
template:"./src/index.html",//指定原文件的存放路径
filename:"./index.html",//指定生成文件的存放路径
})
module.exports={
mode:"development",
plugins:[htmlPlugin]//3.plugins为插件的数组,将来webpack在运行时,会加载并调用这些插件,通过plugin节点,使htmlPlugin插件生效
}
运行npm run dev(这个新的index.html也是虚拟目录(加载到内存中的,没有被显示出来))
效果完成(且实时刷新)
此时右键查看源代码可以发现这个插件帮我们注入了新的js脚本,不再是我们在代码引入的那个了
这时将代码的引入script的代码注释掉也不会有影响,因为此时引用的是插件自动注入的脚本
到此为止,插件配置完毕
devServer中常用的选项
在webpack.config.js配置文件中,导出中配置
module.exports={
devServer:{
open:true,//初次打包完成后,自动打开浏览器
host:"127.0.0.1",//实时打包所使用的主机地址
port:80,//实时打包所使用的端口号
}
}
注意:凡是修改了webpack.config.js配置文件,或修改了package.json配置文件,必须重启实时打包的服务器,否则最新的配置文件无法生效!
loader的使用
webpack默认打包.js为后缀的文件,如果出现不是以.js结尾的文件则会报错
例如上面,我想去掉li的小圆点样式,则新建个css文件
当导入进来这个css文件后就报错了,原因就是这个文件不是js文件
You may need an appropriate loader to handle this file type,
上面报错它提示需要使用合适的loader来处理合适的文件类型
上面的三种loader都是需要安装的
打包处理css文件
安装命令
npm i style-loader@3.0.0 css-loader@5.2.6 -D
在webpack.config.js 的module -> rules数组中,添加loader规则如下:
module.exports = {
module: {//所有第三方文件模块的匹配规则
rules: [//文件后缀名的匹配规则
{test: /.css$/, use:['style-loader','css-loader']}//这里的两个顺序不能乱
]
}
}
其中,test表示匹配的文件类型,use表示对应要调用的 loader
注意:
use数组中指定的loader顺序是固定的
多个loader的调用顺序是:从后往前调用
调用顺序
- webpack 默认只能打包处理.js 结尾的文件,处理不了其它后缀的文件
⒉由于代码中包含了index.css这个文件,因此 webpack 默认处理不了
3.当webpack发现某个文件处理不了的时候,会查找webpack.config.js这个配置文件,看module.rules数组中,是否配置了对应的loader 加载器。
4. webpack把index.css 这个文件,先转交给最后一个loader进行处理(先转交给css-loader).
5.当css-loader处理完毕之后,会把处理的结果,转交给下一个loader(转交给style-loader)
6.当style-loader 处理完毕之后,发现没有下一个loader 了,于是就把处理的结果,转交给了webpack
7.webpack把 style-loader处理的结果,合并到/dist/bundle.js(中,最终生成打包好的文件。
打包less文件
新建一个less文件,并和刚刚上面的css一样用js引入进来会发现报错了(和引入css时报错内容一致)
这是就需要loader去配置了;
安装关于less文件的打包命令
npm i less-loader@10.0.1 less@4.1.1 -D
在webpack.config.js 的module -> rules数组中,添加loader规则如下:
module.exports = {
module: {//所有第三方文件模块的匹配规则
rules: [//文件后缀名的匹配规则
{test: /.less$/, use:['style-loader','css-loader','less-loader']}//这里的两个顺序不能乱
]
}
}
然后运行项目,问题解决了(这里要注意,如果同时存在css和less文件,按照下面的格式写)
loader打包处理样式表中与url路径相关的文件
新建个images文件夹,放个图片,在index.html引入,文件目录如下
在js导入,文件代码如下
运行会发现,同样会报错,报错内容和引入css,less文件的报错内容一致,需要用loader处理
运行如下命令下载相关loader
npm i url-loader@4.1.1 file-loader@6.2.0 -D
在webpack.config.js 的module -> rules数组中,添加loader规则如下:
module.exports = {
module: {//所有第三方文件模块的匹配规则
rules: [//文件后缀名的匹配规则
{ test: /\.jpg|png|gif$/,use: 'url-loader?limit=22229'},
]
}
}
其中?之后的是 loader的参数项:
limit用来指定图片的大小,单位是字节( byte)
只有≤limit大小的图片,才会被转为base64格式的图片
当图片大小超过了我们配置的limit=22229的大小时,还是会以原本的格式展示出来,并不会转换为base64格式,例如下面这张大图就没有转换成功(大图片转换会有损失,不需要转)
上面的配置完以后运行,图片正常加载出来并转换为base64,问题完美解决
打包处理js 文件中的高级语法
webpack 只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级js语法,需要借助于babel-loader进行打包处理。例如webpack无法处理下面的JavaScript代码:
运行报错
解决方法
安装相关依赖包
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
在webpack.config.js 的module -> rules数组中,添加loader规则如下:
module.exports = {
module: {//所有第三方文件模块的匹配规则
rules: [//注意:必须使用exclude 指定排除项;因为 node_modules目录下的第三方包不需要被打包,如果一起打包会消耗时间消耗资源
{ test: /\.js$/,use:'babel-loader',exclude:/node_modules/},
]
}
}
配置babel-loader(这个包是个插件,需要进行配置)
在项目根目录下,创建名为babel.config.js 的配置文件和webpack.config.js同级位置,定义Babel的配置项如下:
module.exports = {
//声明babel 可用的插件
//将来,webpack在调用babel-loader的时候,会先加载 plugins插件来使用
plugins: [['@babel/plugin-proposal-decorators',{legacy:true}]]
}
//详情请参考Babel的官网https://babeljs.io/docs/en/babel-plugin-proposal-decorators
配置build命令
在package.json 文件的scripts节点下,新增build命令如下:
"scripts": {
"dev": "webpack serve",//开发环境中,运行dev命令
"build":"webpack --mode production"//项目发布时,运行build命令,model指定的参数项,会覆盖webpack.config.js 中的model选项。
},
–model是一个参数项,用来指定webpack的运行模式。production代表生产环境,会对打包生成的文件进行代码压缩和性能优化。
注意:----通过–model指定的参数项,会覆盖webpack.config.js 中的model选项。
优化运行项目生成的图片和js文件的存放路径
优化js文件存放路径
使用上面讲的output
//指定生成的文件要存放到哪里?
output: {
path: path.join(__dirname, "./dist1"),//输出文件存放路径
filename: "js/bundle.js"//生成文件名称,在前面加个路径,将会生成js文件夹存放新的js文件
},
优化图片文件存放路径(运行时切记一定要删除dist文件夹再运行,图片文件更换了位置,原位置不动,将被保留,会保留之前的图片文件)
把图片文件统一生成到image目录中
修改webpack.config.js 中的url-loader配置项,新增outputPath选项即可指定图片文件的输出路径:
module.exports = {
module: {//所有第三方文件模块的匹配规则
rules: [//文件后缀名的匹配规则
{ test: /\.jpg|png|gif$/,use: 'url-loader?limit=22229&outputPath=images'},//第三个参数指定存放路径
]
}
}
配置和使用clean-webpack-plugin插件自动删除dist自录
前面说了,dist这个随项目运行自动生成的文件只是在上一次基础上进行覆盖的,那能不能让每次运行就自动删除这个dist文件夹呢?
那现在就来安装一下clean-webpack-plugin插件吧,可以实现每次运行自动删除dist文件夹,保证每次运行生成的文件夹都是最新的文件夹
为了在每次打包发布时自动清理掉dist目录中的旧文件,可以安装并配置clean-webpack-plugin插件:
npm install clean-webpack-plugin@3.0.0 -D
在webpack.config.js 配置如下内容
//2.按需导入插件、得到插件的构造函数之后,创建插件的实例对象
//{ CleanwebpackPlugin }解构赋值写法,右侧实际是个对象,可以打印验证,包含有CleanwebpackPlugin
const { CleanwebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanwebpackPlugin()
//3.把创建的cleanPlugin插件实例对象,挂载到plugins节点中
module.exports={
mode:"development",
plugins: [htmlPlugin,cleanPlugin]
//3.plugins为插件的数组,将来webpack在运行时,会加载并调用这些插件,通过plugin节点,使插件生效
}
开发模式下如何配置SourceMap
Source Map就是一个信息文件,里面储存着位置信息。也就是说,Source Map文件中存储着压缩混淆后的代码,所对应的转换前的位置。
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调试。
开发环境下,推荐在webpack.config.js中添加如下的配置,即可保证运行时报错的行数与源代码的行数保持一致:
module.exports={
mode:"development",
//eval-source-map仅限在"开发模式"下使用,不建议在"生产模式”下使用。
//此选项生成的 Source Map 能够保证"运行时报错的行数"与"源代码的行数"保持一致
devtool:"eval-source-map"
}
注意:在发布项目的时候出于安全性考虑建议关闭SourceMap
在生产环境下,如果省略了devtool选项,则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露给别有所图之人。
只定位不暴露源码
在生产环境下如果只想定位报错的具体行数,且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。实际效果如图所示:
在webpack.config.js中添加如下的配置,即可实现上面效果
在实际发布的时候建议大家选择或直接关闭SourceMap
module.exports={
mode:"development",
//eval-source-map仅限在"开发模式"下使用,不建议在"生产模式”下使用。
//此选项生成的 Source Map 能够保证"运行时报错的行数"与"源代码的行数"保持一致
devtool:"nosources-source-map"
}
SourceMap的最佳实践方式
到此为止,webpack工程化项目配置就全部结束了