webpack

一，webpack

1：安装和配置webpack

执行命令：npm install webpack@版本号    webpack-cli@版本号 -D开发依赖

在项目中配置webpack

1：在项目的根目录中创建webpack.config.js文件

基于node.js,webpack在打包构建之前会先读取这个文件

 

 2:在package.json的scripts节点下新增dev

3：在终端执行命令npm run dev

 2：webpack.config.js文件

3：webpack插件

自动实时打包 webpack-dev-server

配置 webpack-dev-server

1：在package.json文件的scripts节点中的dev

 2：执行npm run dev

二，webpack中的loader

在实际开发中mwebpack默认只能处理.js后缀名结尾的模块，而其他非.js后缀的文件webpack是解决不了的，此时需要调用loader加载器

1：loader加载器

loader加载器的作用

协助webpack打包处理特定的文件模块，

1：css-loader：可以打包处理.css

2：less-loader：可以打包处理.less

3：babel-loader：可以打包处理webpack无法处理的高级语法

loader的调用过程

 

打包处理css文件

1：在终端执行npm i style-loader@版本号 css-loader@版本号 -D

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

 注意：use数组中指定的loader顺序是固定的，多个loader的调用顺序是从后往前调用

打包处理less文件

1：在终端执行npm i less-loader@版本号 less@版本号 -D

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

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

1：在终端执行npm i url-loader@版本号 file-loader@版本号 -D

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

 注意：url-loader其中？之后的是loader的参数项

limit用来指定图片的大小，单位是byte

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

另一种格式

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

1:安装balel-loader相关包下载一下依赖包

babel-loader@8.2.1

@babel/core@7.12.3

@babel/plugin-proposal-class-properties@7.12.3

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

 

三，打包发布

项目开发完后，使用webpack对项目打包的主要原因有以下两点

1：开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

2：开发环境下，打包生成的代码不会被压缩和性能优化

1，配置webpack的打包发布

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

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

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

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

在webpack.congif.js配置文件的output节点中

四: Source Map

Source Map就是一个信息文件，里面存储这位置信息，就存储这代码压缩混淆前后的对应关系