[JavaScript知识库]webpack

webpack

webpack的基本使用

什么是webpack

在项目中安装webpack

在终端运行如下的命令，安装webpack相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-S是 --save的简写

-D是 --save-dev的简写

在项目中配置webpack

在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：

module.exports={
    mode:'development'//mode用来指定构建模式。可选值有development和production
}

在package.json的scripts节点下，新增dev脚本如下：

"scripts":{
    "dev":"webpack"//script节点下的脚本，可以通过npm run执行。例如npm run dev
}

在终端中运行npm run dev命令，启动webpack进行项目的打包构建

mode的可选值

webpack中的默认约定

在webpack4.x和5.x的版本中，有如下的默认约定：

1. 默认的打包入口文件为src->index.js
2. 默认的输出文件路径为dist->main.js

可以在webpack.config.js中修改打包的默认约定

自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。

示例如下：

const path=require('path')//导入node.js中专门操作路径的模块
module.exports={
    entry:path.join(__dirname,',.src.index.js'),//打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'bundle.js'//输出文件的名字
    }
}

webpack的插件

通过安装和配置第三方的插件，可以扩展webpack的能力，从而让webpack用起来更方便。常用的webpack插件有如下两个：

1. webpack-dev-server
2. html-webpack-plugin

webpack-dev-server

每当修改源代码，webpack会自动进行项目的打包和构建

安装webpack-dev-server

安装运行如下命令，即可在项目中安装此插件：

npm install webpack-dev-server -D

配置webpack-dev-server

1. 修改package.json->scripts中的dev命令如下：

   "scripts":{
       "dev":"webpack serve",//script节点的脚本，可以通过 npm run运行
   }
   

2. 再次运行npm run dev命令，重新进行项目的打包

3. 在浏览器中访问http://localhost:8080 地址，查看自动打包效果

webpack-dev-derver会启动一个实时打包的http服务器

html-webpack-plugin

webpack中的HTML插件（类似一个模板引擎插件）

可以通过此插件自定制index.html页面的内容

安装html-webpack-plugin

运行如下命令，即可在项目中安装此插件：

npm install html-webpack-plugin -D

配置html-webpack-plugin

//1.导入html插件，得到一个构造函数
const HtmlPlugin=require('html-webpack-plugin')
//2.创建html插件的实例对象
const htmlPlugin=new HtmlPlugin({
	template:'./src/index.html',//指定原文件的存放位置
	filename:'./index.html',//指定生成的文件的存放路径
})
module.exports={
	mode:'development',
	plugins:[htmlPlugin],//3.通过plugins节点，使htmlPlugin插件生效
}

devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例如下：

devServer:{
    open:true,//初次打包完成后，自动打开浏览器
    host:'127.0.0.1',//实时打包所使用的主机地址
    port:80//实时打包所使用的端口号
}

凡是修改了webpack.config.js配置文件，或修改package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效

webpack中@

@代表webpack中src根目录

配置@，在webpack.config.js文件中配置如下代码：

module.exports={
	resolve:{
    	alias:{
        	'@':path.join(__dirname,'./src/')
    	}
	}
}

webpack的loader

loader概述

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

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：

• 1. css-loader 可以打包处理 .css 相关的文件
• 2. less-loader 可以打包处理 .less 相关的文件
• 3. babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

打包处理css文件

运行 npm i style-loader css-loader -D命令，安装处理css文件的loader

在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{//所有第三方文件模块的匹配规则
	rules:[//文件后缀名的匹配规则
		{
			test:/\css$/,
			use:['style-loader','css-loader']
		}
	]
}

test 表示匹配的文件类型， use 表示对应要调用的 loader

use数组中指定的loader顺序使固定的

多个loader的调用顺序是：从后往前调用

打包处理less文件

运行 npm i less-loader less -D 命令

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

model:{
    //所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则
        {
            test:/\.less$/,
            use:['style-loader','css-loader','less-loader']
        }
    ]
}

打包处理样式表中与url路径相关的文件

运行 npm i url-loader file-loader -D 命令

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

model:{
    //所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则
        {
            test:/\.jpg|png|gif$/,
            use:['url-loader?limit=22229']
        }
    ]
}

其中 ? 之后的是 loader 的参数项：

limit 用来指定图片的大小，单位是字节（byte）

只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

打包处理js文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借 助于 babel-loader 进行打包处理。

安装 babel-loader 相关的包

运行如下的命令安装对应的依赖包：

npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D 

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

//注意：必须使用exclude指定排除项；因为node——modules目录下的第三方包不需要被打包
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

配置bable-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports={
    //声明bable可用的插件
    plugins:[['@bable/plugin-proposal-decorators',{legacy:true}]]
}

打包发布

配置webpack的打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

"scripts":{
    "dev":"webpack server",//开发环境中，运行dev命令
    "build":"webpack --mode production"//项目发布，运行build命令
}

–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件 进行代码压缩和性能优化。

通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

把JavaScript文件统一生成到js目录中

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

output:{
    path:path.join(__dirname,'dist'),
    //明确告诉webpack把生成的main.js文件存放到dist目录下的js子目录中
    filename:'js/main.js',
}

把图片文件统一生成到 image 目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

{
    test:/\.jsp|png|gif$/,
    use:{
        	loader:'url-loader',
            options:{
                	limit:22228,
                    outputPath:'image',
            	},
    },
}

自动清理 dist 目录下的旧文件

在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

//1.安装清理dist目录的webpack插件
npm install clean-webpack-plugin -D
//2.按需导入插件、得到插件的构造函数之后，创建插件的实例对象
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
const cleanPlugin=new CleanWebpackPlugin()
//3.把创建的cleanPlugin插件实例对象，挂载到plugins节点中
plugins:[htmlPlugin,cleanPlugin],//挂载插件

中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

//1.安装清理dist目录的webpack插件
npm install clean-webpack-plugin -D
//2.按需导入插件、得到插件的构造函数之后，创建插件的实例对象
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
const cleanPlugin=new CleanWebpackPlugin()
//3.把创建的cleanPlugin插件实例对象，挂载到plugins节点中
plugins:[htmlPlugin,cleanPlugin],//挂载插件