webpack从入门到精通（基础篇）

--基础篇

webpack是什么

webpack是一种前端资源构建工具，一个静态模块打包器

将浏览器没办法解析的js高级语法与less和sass等样式通过各种工具转编为浏览器能解析的格式而构建工具就是管理这些工具的weibpack是构建工具的一种

webpack的五个核心概念

1.1.1entry

入口指webpack以那个文件为入口起点开始打包，分析构建内部依赖图

1.2.2output

输出指webpack打包后的资源bundles输出到那里去，以及如何命名

1.3.3loader

加载器让webpack能够去处理那些非JavaScript文件（webpack自身只能理解js）

1.4.4plugins

插件可以用于执行范围更广的任务。从打包优化和压缩，一直到重新定义环境中的变量等。

1.5.5mode

模式指webpack使用相应模式的配置

1.运行指令： 

    开发环境：webpack ./src/index.js -o ./build/built.js --mode=development

      webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js 整体打包环境，是开发环境

    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production

      webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js 整体打包环境，是生产环境

    2.结论

      1.webpack能处理json和js文件，不能处理css/img等其他资源

      2.生产环境比开发环境多一步压缩js代码

      3.生产环境和开发环境将ES6模块编译成浏览器能识别的模块化

webpack.config.js配置文件

处理样式资源（webpack如何处理Css、Less、Sass、Scss、Styl样式资源）

处理Css资源

1.下载包

npm i css-loader style-loader -D

2.引入一个css文件

3.在webpack.config.js文件里配置

处理Less资源

1.下载包

npm i less less-loader -D

2.功能介绍

less-loader：负责将less文件编译成Css文件

3.配置

处理Sass和Scss资源

1.下载包

npm i sass-loader sass -D

2.功能介绍

sass-loader：负责将Sass文件编译成css文件

sass：sass-loader依赖sass进行编译

3.配置

处理Styl资源

1.下载包

npm i stylus-loader -D

2.功能介绍

stylus-loader：负责将Styl文件编译成css文件

3.配置

图片资源处理

指定输出文件路径

图片：

图片输出路径

js

js输出路径

自动清空上次打包内容

处理字体图标资源

处理其他资源（视频、音频）

Eslint使用

1.安装eslint-webpack-plugin

npm i eslint-webpack-plugin --save-dev

2.把插件添加到webpack配置

    3.配置eslint文件

babel

作用：用于将es6语法向下兼容js语法，以便能够在旧版本浏览器运行

使用：

1.安装

2.在配置文件中配置

处理html资源

1.下载

npm i -D html-webpack-plugin

2.导入

3.配置

开发服务器&自动化

1.下载包

npm i webpack-dev-server -D

2.配置

3.启动命令：npx webpack serve

提取css为单独文件

网上较慢时会出现闪屏现象影响用户体验感所以需要将css抽取为单独文件

1.下载包

npm i mini-css-extract-plugin -D

2.配置

引入

将所有style-loader替换

插件配置输出路径

css兼容性处理

1.包下载

npm i postcss-loader postcss postcss-preset-env -D

2.配置

在package.json中配置

封装样式loader函数

抽离出公共部分

css压缩

1.下载包

npm i css-minimizer-webpack-plugin --save-dev

2.配置

引入包

基础篇总结：

1.两种开发模式

开发模式：代码能编译自动运行

生产模式：代码编译优化输出

2.webpack基本功能

开发模式：可以编译ES Module语法

生产模式：可以编译ES Module语法、压缩js代码

3.webpack配置文件

(1)5个核心概念

1.entry

2.output

3.loader

4.plugin

5.mode

(2)devServe配置

4.webpack脚本指令用法

webpack：直接打包输出

webpack serve：启动开发服务器，内存编译打包没有输出

基础篇完结撒花~~~