webpack学习笔记

 

工具的出现是为了解决问题

1.构建工具-webpack（静态模块打包器）

2.html文件引入less文件，浏览器不识别；

3.浏览器不支持es6以上新语法（es6引入js模块化开发）

4.webpack入口文件index.js===>根据入口文件形成依赖关系===>引入依赖形成代码块chunk===>每个chunk根据不同资源进行不同处理（less=>css等，处理过程叫打包）===>生成最终文件bundle

5.webpack五大核心概念：

input:入口文件，告诉webpack从那个入口开始打包

output:输出位置，生成bundle文件放到哪里

loader:转化非javascript文件为webpack可以识别的文件（webpack本身只能处理js文件和json文件，less,img等需要通过loader转化）

plugin:插件，用于优化，压缩代码，定义环境变量等操作

mode:webpack运行模式

5.1 loader:

处理css loader:[style-loader,css-loader]

处理less loader:[style-loader,css-loader,less-loader]

处理图片loader:[url-loader]  url-loader依赖于fileloader

处理html文件中引入的图片资源

处理其他样式资源（非html、js、css、图片资源）：

5.2 plugin:

5.2.1 html-webpack-plugin:

6.devServer自动化编译：

7.开发环境基本配置---按照类型分类打包：

8.生产环境搭建：

成效：js中提取css样式（css样式写在js中，代码庞大会出现加载速度慢，样式混乱问题）

          压缩代码

          浏览器兼容性代码转换

9.eslint代码检查

10.webpack性能优化

11.缓存：一般对js进行缓存和资源进行缓存