webpack

前端工程化

前端开发：

• 模块化（js的模块化、css的模块化、资源的模块化）
• 组件化（UI样式、结构、行为的复用）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
• 自动化（自动化部署、自动化部署、自动化测试）

前端工程化：在企业级的前端项目中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

前端工程化解决方案：

• webpack
• parcel（开发第三方包）

webpack

功能：

1. 友好的前端模块化开发支持
2. 代码压缩混淆
3. 处理浏览器端Javascript的兼容性、性能优化等强大的功能

webpack的安装、配置和运行

1.安装

npm i webpack@5.42.1 webpack-cil@4.7.2 -D
//-S 是--save的简写  （核心依赖包）
//-D 是--save-dev的简写	（上线时无需使用）

在终端运行npm run dev 后，生成一个dist文件夹，其中的main是处理兼容性后的js文件。

module.exports={
    //代表webpack运行的模式,而可选的有两个 development 和production
    mode:'development'
    //结论：开发的时候用development,因为追求的是打包速度
    //		上线的时候用production,因为上线追求体积小
}

web.config.js文件：

执行npm run dev 后，先读取webpack.config.js配置文件，确定webpack运行模式

webpack中的默认约定

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

默认的打包入口文件为：src -> index.js

默认的输出文件路径为: dist-> main.js

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

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

//webpack.config.js

const path=require('path')
module.exports = {
	entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
	output:{
		path:path.jpin(__dirname,'./dist')//输出文件的存放路径	
        filename:'bundle.js'	//输出文件的名称
	}
}

webpack中的插件

webpack-dev-server

类似于node.js中用到的nodemon工具

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

安装

npm i webpack-dev-server@3.11.2 -D

配置：

output生成的bundle.js文件会被放到内存（可以在 http://localhost:8080/bundle中访问）里

问题

问题：webpack-dev-server安装后不实现自动更新

解决：在html文件中引入http://localhost:8080/bundle.js

替代./dist/bundle.js

深层原因是因为跨域问题，导致file协议无法访问http的js文件

html-webpack-plugin

• webpack中的html插件（类似于一个模板引擎）
• 可以通过插件自定制index.html页面中的内

安装

 npm install html-webpack-plugin -D

配置

const HtmlPlugin =require('html-webpack-plugin')

const htmlPlugin=new HtmlPlugin({
  template:'./src/index.html',
  filename:'./index.html'
})
module.exports={
  //代表webpack运行模式，可选值有两个development和production
  mode:'development',
  plugins:[htmlPlugin]
}

html-webpack-plugin解惑

1. 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中。
2. HTML插件在生成的index.html页面自动注入了打包的bundle.js文件

devserver节点

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

webpack中的loader

webpack只能打包以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，需要调用loader加载器才可以正常打包

作用：协助webpack打包处理特定的文件模块

• css-loader
• less-loader
• babel-loader

打包处理css文件

安装

npm i style-loader css-loader -D

配置

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

module:{
	rules:[
	{test:/\.css**$**/,use:['style-loader','css-loader']}
    ]
  }

less-loader安装和配置

在webpack.config.js中配置如下：

module:{
    rules:[
      //定义了不同模块对应的 loader
     {test:/\.css**$**/,use:['style-loader','css-loader']},
     //处理 .less 文件的loader
      {test:/\.less**$**/,use:['style-loader','css-loader','less-loader']}
 ]
  }

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

安装

npm i url-loader file-loader -D

配置

rules:[
      {test:/\.jpg**|**png**|**gif**|**jpeg/,use:'url-loader?limit-2229'}
    ]
  }
//其中？之后的是loader的参数项：
//limit 用来指定图片的大小，单位是字节（byte）
//只有<=limit大小的图片，才会被转为base64格式的图片

打包处理js中的高级语法

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

function info(target){
	target.info='person info'
}
//为Person类应用 in fo装饰器
@info
class Person{}

console.log(Person.info)

安装：

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

配置

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

{ test:/\.js$/,use:"bable-loader",exclude:/node_modules/}

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

module.exports = {
    //将来webpack在调用 babel-loader 的时候，会先加载 plugins 插件来使用
	plugins:[['@babel/plugin-proposal-decorators',{ legacy : true }]]
}

base64图片的优缺点

<img src="ss">  == <img src="base64">

可以优化图片加载速度，适合转化小图片（图片体积会稍微变大）

配置webpack的打包发布

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

  "scripts": {
    "dev": "webpack serve",
    "build":"webpack --mode production"	//项目发布时，运行 build 命令
  }

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

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

发布优化

将js文件放置到js文件夹里

output:{

   path:path.**join**(__dirname,'./dist'),//输出文件的存放路径  

    filename:'js/bundle.js'   //输出文件的名称

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

修改url-loader,新增 outputPath选项即可

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

//在配置 url-loader 的时候，多个参数之间采用&连接
{test:/\.jpg|png|gif|jpeg/,use:'url-loader?limit-2229&outputPath=images'},

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

安装配置clean-webpack-plugin

安装

npm install clean-webpack-plugin -D

配置

//obj={CleanwebpackPlugin}
//obj是一个对象 {CleanwebpackPlugin = function(){} ...}
//左侧的花括号是解构赋值
const {CleanwebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin =new CleanwebpackPlugin()

plugins:[htmlPlugin,cleanPlugin]

webpack中@的作用

import msg from '../../msg'


//建议使用@表示src源代码目录，从外往里查找，不要使用../从里往外查找
//然而在wabpack中会报错，不可以直接用
//webpack.config.js中新增
//**********************************************
//	resolve:{
//		alias:{
//       	 '@':path.join(__dirname,'./src')
//    	}
//	}
//**********************************************
//告诉webpack,'@'所代表的文件夹src

import msg from '@/msg.js'

Source Map

Source Map是一个信息文件，里面储存的是位置信息，对应着转换前的位置。

有了它，出错时，除错工具将直接显示原始代码，而不是转换后的代码。

配置：

module.exports={
        //在实际发布的时候，建议选择把devtool的值设置为nosources-source-map或者直接关闭Sourcemap
    devtool:'eval-Source-map',
}

生产环境下的Source Map

在发布代码时，处于安全性考虑（防止有人利用漏洞），注释掉devtool选项

最优解决方案：只定位行数，不暴露源代码

将devtool的值设置为nosources-source-map
，里面储存的是位置信息，对应着转换前的位置。

有了它，出错时，除错工具将直接显示原始代码，而不是转换后的代码。

配置：

module.exports={
        //在实际发布的时候，建议选择把devtool的值设置为nosources-source-map或者直接关闭Sourcemap
    devtool:'eval-Source-map',
}

生产环境下的Source Map

在发布代码时，处于安全性考虑（防止有人利用漏洞），注释掉devtool选项

最优解决方案：只定位行数，不暴露源代码

将devtool的值设置为nosources-source-map