webpack的配置和安装以及其他的一些插件的配置和应用

萧寂173

已于 2023-03-02 14:34:50 修改

阅读量943

点赞数 2

分类专栏： vue 文章标签： webpack javascript 前端

于 2022-10-14 17:12:25 首次发布

本文链接：https://blog.csdn.net/weixin_68658847/article/details/127323182

版权

vue 专栏收录该内容

61 篇文章 4 订阅

订阅专栏

文章目录

webpack工程化项目
安装和配置webpack-dev-server这个插件
- - - 插件的作用：每当修改了源代码，webpack 会自动进行项目的打包和构建
安装html-webpack-plugin插件
- - - - 安装插件
        在webpack.config.js配置文件中,配置html-webpack-plugin插件
devServer中常用的选项
loader的使用
配置build命令
优化运行项目生成的图片和js文件的存放路径
- - - - 优化js文件存放路径
      - 优化图片文件存放路径(运行时切记一定要删除dist文件夹再运行,图片文件更换了位置,原位置不动,将被保留,会保留之前的图片文件)
配置和使用clean-webpack-plugin插件自动删除dist自录
- - - - 为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装并配置clean-webpack-plugin插件:
开发模式下如何配置SourceMap
- - - - 只定位不暴露源码
        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,会发现多了

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"
}