Vue学习笔记01 前端工程化与webpack（黑马）

一、前端工程化和webpack

1、前端工程化

前端开发：

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

什么是前端工程化
在企业的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规划化、标准化。

好处：前端开发自成体系，有一套标准的开发方案和流程。

前端工程化的解决方案
目前主流的前端工程化解决方案：

• webpack (主要)
• parcel

2、webpack

webpack的基本使用

1、什么是webpack
概念：webpack是前端项目工程化的具体解决方案。
主要功能：他提供了友好的前端模块化的支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性，性能优化等强大功能。
** 2、【案例】创建列表隔行变色项目**

1. 新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
2. 新建src源代码目录
3. 新建src->index.html首页和src->index.js脚本文件
4. 初始化页面基本结构
5. 运行npm install jquery -S命令，安装jQuery
6. 通过ES6模块化的方式导入jQuery，实现列表隔行变色效果
   
   
   运行结果：出错，语法不兼容
   
   解决方法：在项目中安装webpack
   3、在项目中安装webpack
   在终端运行如下命令，安装webpack相关的两个包：

npm install [email protected] [email protected] -D

-S 是 --save的简写 （在开发和上线都用到的包 可以加S也可以不加）
-D 是 --save-dev的简写 （只在开发阶段用到的包）

4、在项目中配置webpack

1. 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置。

module.exports={
	mode: 'development' //mode 用来指导构建模式 可选值有development，production
}

2. 在package.json的scripts节点下，新增dev脚本如下：

"scripts":{
	"dev": "webpack"//scripts节点下的脚本可以通过npm run执行 如npm run dev
}

3. 在终端中运行npm run dev 启动webpack进行项目的打包。
   
   5、webpack中的默认约定
   在webpack4.x和5.x的版本中，有如下的默认约定：
4. 默认的打包入口文件未src -> index.js
5. 默认的输出文件的路径为dist -> main.js
6. 可以在webpack.config.js中修改打包的默认约定。
   自定义打包的入口与出口
   在webpack.config.js配置文件中，通过entry节点指定打包入口。通过output节点指定打包的出口

//entry 指定要处理哪个文件
   entry: path.join(__dirname, './src/index1.js'),
   //output 指定生成的文件要存放到哪里
   output: {
       //存放到目录
       path: path.join(__dirname, 'dist'), 
       //生成的文件名
       filename: 'bundle.js'
   }

webpack中的插件

插件的作用

通过安装和配置第三方的插件，可以扩展webpack的能力，从而让webpack用起来更方便。最常用的插件有如下两个：

1. webpack-dev-server
   • 类似于node.js阶段用到的nodemon工具
   • 每当修改了源代码，webpack会自动进行项目的打包和构建。
2. html-webpack-plugin
   • webpack中的HTML插件（类似于一个模板引擎）
   • 可以通过 插件自定制index.html页面的内容

安装webpack-dev-server

运行如下命令：

npm install [email protected] -D

配置webpack-dev-server

1. 修改package.json -> scripts中的dev命令如下：

"scripts": {
    "dev": "webpack serve"
  }

2. 再次运行npm run dev 命令，重新打包项目
3. 在浏览器中访问http://localhost:8080地址，查看打包效果。

注意：webpack-dev-srever会启动一个实时打包的http服务器。
webpack-dev-server 打包的结果会存放在内存 中。

安装html-webpack-plugin

npm install [email protected] -D

配置html-webpack-plugin

在webpack.config.js文件中进行如下的配置：

//1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

//2.创建HTML插件的实例对象
const htmlPlugin =new HtmlPlugin({
    template: './src/index.html',//指定源文件的存放路径
    filename: './index.html',//指定生成文件的存放路径
})
module.exports={
	mode: 'development', //mode 用来指导构建模式 可选值有development，production
    plugins: [htmlPlugin],//3.通过plugins节点 使htmlPlugin插件生效
}

devServer节点

在webpacke.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例如下：

注意：凡是修改了webpacke.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效。

webpack中的loader

loder概述

在实际开发中过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才能正常打包，否则会报错。

loder加载器的作用

协助webpack打包处理特定的文件模块。
比如：

• css-loader ：可以打包.css相关的文件
• less-loder：可以打包处理.less相关的文件
• babel-loder：可以打包处理webpack无法处理的高级JS语法。
  

打包处理css文件

css文件在webpack中导入方式
在index.js中使用如下方式导入：

css打包处理步骤：

• 运行npm install [email protected] [email protected] -D 命令，安装处理css文件的loader
• 在webpack.config.js的module -> rules数组中，添加loader规则 如下所示：

module: { //所有第三方文件模块的匹配规则
        rules: [
            //定义了不同模块对应的loader
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }

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

打包处理less文件

less文件在webpack中导入方式
在index.js中使用如下方式导入：

less打包处理步骤：

• 运行npm install [email protected] [email protected] -D 命令，安装处理less文件的loader
• 在webpack.config.js的module -> rules数组中，添加loader规则 如下所示：

module: { //所有第三方文件模块的匹配规则
        rules: [
            //定义了不同模块对应的loader
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            }
        ]
    }

webpack处理样式的过程

打包处理图片文件

图片文件在webpack中导入方式
在index.js中使用如下方式导入：

图片打包处理步骤：

• 运行npm install [email protected] [email protected] -D 命令
• 在webpack.config.js的module -> rules数组中，添加loader规则 如下所示：

module: { //所有第三方文件模块的匹配规则
        rules: [
            //定义了不同模块对应的loader
            {
                test: /\.jpg|png|gif$/,
                use: 'url-loader?limit=22229'
            }
        ]
    }

• 其中？之后的是loader的参数想：limit用来指定图片的大小，单位是字节（byte），只有<=limit大小的图片才会被转为base64格式的图片

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

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

运行如下的命令安装对应的依赖包：
npm i [email protected] @babel/[email protected] @babel/[email protected] -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

打包发布

source Map

实际开发中需要自己配置webpack吗