Day11-Webpack前端工程化开发
Webpack
一 webpack基本概念
遇到问题
开发中希望将文件分开来编写，比如CSS代码，可以分为头部尾部内容，公共的样式。
JS代码也希望拆分为多个文件，分别引入，以后代码比较好维护。
本地图片，希望可以实现小图片不用访问后端，保存在前端代码中就可以了
运行程序时我们希望你的文件越少越好，外部资源少了，减少对服务器访问次数。
比如JS我们希望项目只有一个，加载一次就可以。
CSS代码我们希望你项目只有一个，加载一次就可以
开发和最终运行代码产生了冲突？我们可以用Webpack解决这个冲突
概念
webpack是前端静态模块打包器,可以将我们错综复杂的文件，按照指定的规则打包成我们最终要部署的程序。
它主要有如下作用
- 构建前端工程化的项目
- 对源代码进行打包，得到最终要运行的代码
webpack能够实现：
- 将代码中所有JS依赖关系，打包后生成一个JS文件。最终引入到HTML代码中
- 将所有的CSS依赖关系，打包生成一个CSS文件，最终引入HTML代码中
- scss代码，可以直接编译生成css，以后写的scss代码，不用easy scss编译。
- 图片打包。大图片正常的打包放在项目中，小图片通过base64编码的方式保存在代码中。
通过webpack打包后的项目 体积更小、文件变的更少
二 图片的base64编码
项目中的图片,可以是文件的形式存在,也可以是base64编码的方式存在
我们将一张图片转化为base64编码，浏览器能直接识别这个编码。
在线转码网站：https://base64.us/
如果图片不是../d链接，而是用base64编码，浏览器不会去服务器加载图片，而是直接解析代码。效率会更高。
base64编码适合于小图片，图片越大，base64编码解析结果越大,影响网页的性能
三webpack项目环境搭建
(1)创建一个项目,并初始化项目
npm init -y
(2)在项目中安装webpack工具
npm install webpack --save-dev
npm install webpack-cli --save-dev
webpack:webpack的核心文件
webpack-cli:webpack的脚手架工具,利用他可以实现项目打包
—save-dev代表开发环境依赖.webpack只有在开发过程中才会使用,项目打包后就不用了
(3)下载服务器插件
npm i webpack-dev-server --save-dev
webpack-dev-server:webpack内置了一个服务器,可以通过这个来启动项目
(4)安装合并js的插件
npm i webpack-merge --save-dev
(5)下载项目启动插件
npm i cross-env --save-dev
(6)下载html打包插件
npm i html-webpack-plugin -D
-D就表示 —save-dev的意思
(7)下载CSS打包插件
npm i mini-css-extract-plugin style-loader -D
npm install [email protected] -D
mini-css-extract-plugin：这个插件用于打包CSS的插件，以后如果遇到index.js中import引入了CSS代码，我们就会启动这个插件来处理代码。
css-loader：解析CSS源代码
style-loader：解析CSS样式代码
(8)下载SCSS打包插件
npm i sass-loader -D
npm i [email protected] --sass_binary_site=https://npm.taobao.org/mirrors/node-sass -D
node-sass这个包需要单独使用淘宝镜像下载
(9)下载图片打包插件
npm install url-loader file-loader html-withimg-loader -D
url-loader ：打包检测文件路径
file-loader：打包图片文件
html-withimg-loader：针对html网页中img图片打包
css-loader版本需要降低为5.2.6，否定背景图片和img标签打包生成两个文件
(10) 下载静态文件打包插件
项目中有些文件不参与打包。不参与打包的文件在打包过程中，原封不动复制到打包后的代码中。
npm i copy-webpack-plugin -D
四 搭建Webpack项目结构
(1)创建webpack配置文件
开发环境 程序开发时的环境,代码提示友好,代码格式规范.报错信息明确
生产环境 线上运行的环境, 积小\代码压缩\减少输出,代码中不要console.log
我们可以在项目的根目录下面创建三个文件
webpack.dev.config.js --->开发环境配置文件
webpack.prod.config.js --->生产环境的配置文件
webpack.base.config.js --->公共配置文件
开发环境和生产环境相同的代码,写在base文件中
开发环境自己特有配置dev这个文件
生产环境特有配置写在prod这个文件
(2)创建项目目录
前端工程化项目的标准目录结构
五 webpack配置文件信息
webpack.base.config.js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const webpack = require("webpack")
const CopyWebp