什么是webpack?

个人理解的是webpack就是一个“处理兼容性”、“代码压缩”工具

可参考博客：webpack基础概念

webpack基础打包配置

好用的东西，往往都需要环境变量的搭配

1.安装Nood.js至本地(网上教程一大把)

nood.js安装成功后终端输入npm -v，如果返回版本号即表示安装成功

2.新建自己的项目文件

 这里以本人的项目文件为例

• 项目文件为demo
• demo->dist用于存放webpack打包好的文件
• demo->src为自己的源码文件夹，里面存放着我们的html、css、js

3.初始化web包

终端输入 npm init -y注意：终端必须在项目文件夹根目录打开，在vs-code里面的文件列表找到自己的项目文件右击点击“在集成终端中打开”

初始化成功项目文件夹中会出现一个package.json文件

4.安装依赖webpack与webpack-cli

终端输入：npm i webpack@5.42.1 webpack-cli@4.10.0 -D

安装依赖时的参数：

• S表示将文件包放入dependencies节点下表示此文件包会被一直用到，他是--save的简写

• D表示将文件包放入devDependencies节点表示此文件包只会在开发阶 段用到，他是--save-dev的简写

5.在项目文件夹根目录创建webpack.config.js文件夹，并配置一下配置，它是webpack的配置文件

//demo->webpack.config.js
module.exports={mode:'development'
}

6.配置命令

//demo->package.json下面的script字段（如果熟悉命令该配置阶段可以省略）"dev":"webpack"              //打包命令
"dev-serve":"webpack serve"  //实时打包命令

7.运行配置命令 

终端输入：npm run dev 或 npx webpack

此时在我们的dist文件夹下就会生成打包后的文件 

webpack其他配置

1.打包模式

//demo->webpack.config.js
module.exports = { mode: 'development'
}

mode有两个值：development:开发阶段[运行速度快] \ production:上线阶段[文件体积小]
也就是说如果在开发阶段，那么mode='development,如果在上线阶段，mode='production

2.entry与output

entry与output为打包入口与打包出口，webpack默认打包路径为src>index.js，默认输出路径为dist>main.js，这些可以通过我们的entry与output修改

//demo->webpack.config.js
const path=require('path')//先引入nood里面的path
module.exports = { entry:path.join(__dirname,'./src/index1.js'),//打包入口output:{path:path.join(__dirname,'./dist'),//输出文件filename:'index1.js'//输出的文件名}//__dirname表示当前目录,第二个参数为对应路径
}

3.webpack-dev-server插件

webpack-dev-server插件可以实时打包，因为我们每更改一次源码都要运行npx webpack进行重新打包

1.终端输入：npm install webpack-dev-server@3.11.2 -D2.将源文件夹下面的首页面的script标签的src属性改为根目录下生成的文件(比如我们的出口为app.js,则src='/app.js')3.运行命令(打包演练我们配置的命令)终端输入：npm run dev-serve 或 npx webpack serve4.结束实时打包终端按 Ctrl+c 两次

此时终端光标会在不停闪烁等待我们对源文件的更改,我们每Ctrl+s一次都会将最新的代码保存在内存中，生成的文件也保存在内存中，而并非我们的物理磁盘，所以要查看最新的代码效果需要访问内存中的首页

个人认为“webpack-dev-server插件虽然可以实时打包，但是它只是一个预览，其打包产生的文件存放在虚拟内存中的根目录下，而并非物理磁盘，预览效果也只能从虚拟内存进去才能看见，其功能相当于调试，通常调试完还需要我们重新打包一次新的代码才会出现在我们的物理磁盘上”

4.html-webpack-plugin插件

html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js

1.终端输入：npm install html-webpack-plugin@5.3.2 -D2.在webpack.config.js中配置如下const HtmlWebpackPlugin = require('html-webpack-plugin')//导入 HTML 插件，得到一个构造函数module.exports = {plugins: [new HtmlWebpackPlugin({template: './src/html/index.html',//指定html模板filename: 'index.html'            //指定生成的html文件名})]}3.运行npx webpack 可以发现dist下面不仅有js文件，还有html文件

在实际开发过程中，webpack默认只能打包处理以.js 后缀名结尾的模块。其他非.js 后缀名结尾的模:webpack默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!

5.css-loader

处理我们的css样式，直接将样式引入js入口打包,这样网页只需要引入一个js入口即可

1.终端输入：npm install style-loader@3.0.0 css-loader@5.2.6 -D2.在webpack.config.js下配置module.exports = {module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']}//test表示对应的文件类型,use表示文件对应的loader]}}3.在入口js文件中使用es6语法引入css模块：import 'css文件路径'4.运行命令：npx webpack 查看首页是否有css样式效果

6.less-loader

1.终端输入：npm i less-loader@10.0.1 less@4.1.1 -D2.在webpack.config.js下配置module.exports = {module:{rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]//test表示对应的文件类型,use表示文件对应的loader}}3.在入口js文件中使用es6语法引入less模块：import 'less文件路径'4.输入命令 npx webpack 查看效果

7.url-loader

网页中每请求一次图片都会影响网页的性能，url-loader类似于base64转码软件，可以将图片地址转换为base64字符串，将一些较小的图片直接转换为base64字符串，这样可以减少请求次数，提高网页性能

1.终端输入：npm i url-loader@4.1.1 file-loader@6.2.0 -D2.在webpack.config.js下配置如下module.exports = {module:{rules:[{test:/\.jpg|png|gif$/,use:['url-loader?limit=22229']}]//test表示对应的文件类型,use表示文件对应的loader，limit表示临界值}}3.js入口文件导入图片 import 变量(log) from "图片地址"4.动态给img的src属性赋值 img(id/class).src=保存图片地址的变量(log)

8.babel-loader

webpack只能处理一部分js高级的语法，对于那些webpack无法处理的高级语法，需要借助于Babel-loader

1.终端输入：npm i babel-loader@6.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D    2.在webpack.con.fig下配置如下module.exports = {module:{rules:[{test:/\.js$/,use:['babel-loader'],exclude:/node_modules/}]//test表示对应的文件类型,use表示文件对应的loader,exclude表示排除项}} 3.新建babel.config.js,并配置如下module.exports={plugin:[["@babel/plugin-proposal-decorators",{legacy:true}]]}

在配置webpack.config.js是会多出一个exclude,它表示排除项，排除第三方包的高级语法