Vue2.0 第一阶段 webpack基础

BEGIN

工程化的概念

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

webpack的基本使用

1.什么是webpack

概念：是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
好处：让程序员把重心放到了具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前vue、react等前端项目，基本上都是基于webpack进行工程化开发的。

2.创建列表隔行变色项目

知识点2

npm init -y
//项目初始化，创建package.json文件

知识点2

-S  是  --save
-D  是 --save-dev

知识点3

npm install jquery -S
//-S的作用是告诉npm，jquery安装后需要写入到package.json的dependencies中
//dependencies是开发阶段和上线阶段都要用到的包

3. 在项目中安装webpack

知识点4

//安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
//-D的作用是告诉npm，webpack安装后需要写入到package.json的devDependencies中
//devDependencies是只在开发阶段要用到的包

4. 在项目中配置webpack

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

// 使用nodejs中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    mode: 'development'
    // mode 用来指定构建模式，可选值有 development 和 production
}

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

"scripts": {
    "dev":"webpack"
  },

最后在终端运行npm run dev命令，启动微博pack进行项目的打包构建

4.1 mode的可选值

• development
  概念：用于开发环境，不会对打包生成的文件进行代码压缩和性能优化，打包速度快，适合在开发阶段使用
• production
  概念：用于生产环境，会对打包生成的文件进行代码压缩和性能优化，打包速度很慢，仅适合在项目发布阶段使用

4.2 webpack.config.js作用

• webpack.config.js 是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
• 注意：由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。

4.3 webpack中的默认约定

在webpack4.x和5.x的版本中，有如下的默认约定：

• 默认的打包入口文件为：src --> index.js
• 默认的输出文件路径为：dist --> main.js
• 可以在webpack.config.js中修改打包的默认约定

4.4 自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口

// 导入node.js中专门操作路径的模块
const path = require('path')

// 使用nodejs中的导出语法，向外导出一个webpack的配置对象
module.exports = {
	// 打包入口的文件路径
	entry: path.join(__dirname, './src/index.js'),
	output: {	
		// 输出文件的存放路径
		path: path.join(__dirname, './dist'),
		// 输出文件的名称
		filename: 'bundle.js'
	}
}

webpack的插件

1.webpack插件的作用

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

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

2.webpack-dev-server插件的使用

2.1 安装webpack-dev-server

运行如下代码：

npm install webpack-dev-server@3.11.2 -D

2.2 配置webpack-dev-server

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

{
  "scripts": {
    "dev":"webpack-server"
  }
}

• 再次运行npm run dev,重新进行项目打包
• 打开终端，修改js文件即可看见变化

遇到的问题

1. npm run dev之后报错，百度检查之后，可能是webpack-cli@4.7.2版本更不上，则需要更新至webpack-cli@4.9.0

npm install webpack-cli@4.9.0 -D

2. 无法正常安装1中的代码，需全局更新npm，代码如下

npm install npm -g

3.html-webpack-plugin插件的使用

3.1 安装html-webpack-plugin

运行如下代码：

npm install html-webpack-plugin@5.3.2 -D

3.2 配置html-webpack-plugin

在webpack.config.js中添加如下配置

// 导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 创建html插件实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个文件
    template:'./src/index.html',
    // 指定复制出来的文件名和存放位置
	filename: './index.html'
})

// 使用nodejs中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    // 插件数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin]
}

3.3 解惑html-webpack-plugin

• 通过html插件复制到项目根目录中的index.html也被放到了内存中
• html插件在生成index.html页面，自动注入了打包的bundle.js文件

4.devserver节点

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

devServer: {
	open: true,  
	// 默认打开的主机地址
	host: '127.0.0.1',
	// 如果端口号是80,可以省略
	post: 80,
}

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

webpack中的loader

1. loader概述

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

loader加载器的作用: 协助webpack打包处理特定的文件模块.比如:

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

2. loader的调用过程

x

3. 打包处理css文件

• 运行npm i style-loader@3.0.0 css-loader@5.2.6 -D命令，安装处理css文件的loader
• 在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{
    // 所有第三方文件模块的匹配规则
    rules: [
        // 文件后缀名的匹配规则
        { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
}

4. 打包处理less文件

• 运行npm i less-loader@10.0.1 less@4.1.1 -D命令，安装处理css文件的loader
• 在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{
    // 所有第三方文件模块的匹配规则
    rules: [
        // 文件后缀名的匹配规则
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
}

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

• 运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令
• 在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{
    // 所有第三方文件模块的匹配规则
    rules: [
        // 文件后缀名的匹配规则
        { test: /\.jpg|png|gif$/, use: ['url-loader?limt=22229'] }
        //
    ]
}

注意： 其中 ? 之后是loader的参数项

• limit用来指定图片的大小，单位是字节（byte）
• 只有 ≤ limit大小的图片，才会被转成base64格式的图片

6. 打包处理js中的高级语法

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

例如webpack无法处理以下代码：

// 定义装饰性函数
function info(target){
    target.info = 'Person info'
}
// 定义一个普通的类
@info
class Person {}

console.log(Person.info)

6.1 安装babel-loader相关的包

• 运行npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D命令
• 在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{
    // 所有第三方文件模块的匹配规则
    rules: [
        // 注意，必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要打包
        { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        //
    ]
}

6.2 配置babel-loader

在项目根目录，创建名为babel.config.js的配置文件，定义babel的配置项如下：

module.exports = {
    // 声明babel可用的插件
    // 将来webpack在调用babel-loader的时候会先加载plugin插件来使用
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

打包发布

1. ？

2. 配置webpack的打包发布

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

{
  "scripts": {
  	// 开发环境时，运行dev命令
    "dev": "webpack server"
    // 项目发布时，运行build命令
    "build": "webpack --mode production" 
  }
}

• –model是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
• 通过–model指定的参数项，会覆盖webpack.config.js中的model选项

3. 把JavaScript文件统一生成到js目录中

在webpack.config.js的output中，进行如下配置：

module.exports = {
	output: {	
		// 输出文件的存放路径
		path: path.join(__dirname, './dist'),
		// 输出文件的名称
		filename: 'js/bundle.js'
	}
}

4. 把图片文件统一生成到image目录中

在webpack.config.js的url-loader中，新增outputPath选项，如下配置：

    module:{
        // 所有第三方文件模块的匹配规则
        rules: [
			{ test: /\.jpg|png|gif$/, use: {
                loader: 'url-loader',
                options: {
                    limit: 22228,
                    outputPath: 'image'
                }
            } },
         ]
   }

5. 自动清理dist目录下的旧文件

为了在每次发布时自动清理掉dist目录中的旧文件，可以安装并配置clean-webpack-plugin插件：

• 运行npm install --sava-dev clean-webpack-plugin命令
• 在webpack.config.js中，添加如下配置：

// 左侧的花括号是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // 插件数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin, new CleanWebpackPlugin()],
}

Source Map

1. ？

2. 什么是Source Map

Source Map就是一个信息文件，里面存储着位置信息，也就是说，Source Map文件存储着压缩后混淆后的代码，所对应的转换前的位置。
有了它，出错的时候，除错工具姜直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

3. 默认Source Map配置

• 默认Source Map的问题
  开发环境下默认生成的Source Map，记录的是生成后的代码的位置，会导致运行时报错的行数与源代码的行数不一致。
• 解决默认Source Map 的问题
  开发环境下，推荐在webpack.config.js中，添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致：

module.exports = {
    mode: 'development',
    devtool: 'eval-source-map'
}

注意：仅限在开发模式使用，不建议在生产模式下使用

4. webpack生产环境下的 Source Map

在生产环境下，如果省略了devtool选项，则最终生成的文件不包含Source Map，能够防止原始代码的暴露。

• 只定位行数不暴露源码
  在生产环境下，如果只想定位报错的具体行数，且不想暴露源码，此时可以将devtool的值设置为nosources-source-map。
• 定位行数且暴露源码
  在生产环境下，如果想定位报错的具体行数的同时，展示具体报错的源码，此时可以将devtool的值设置为source-map。
  注意： 选择此选项后，你应该将你的服务器配置为，不允许普通用户访问source map文件！

5. Source Map 的最佳实践

• 开发环境下：
  建议将devtool的值设置为eval-source-map
  好处：可以精准定位到具体的错误行
• 生产环境下：
  建议直接关闭source map或将devtool的值设置为nosources-source-map
  好处：防止源码泄露，提高网站的安全性

在实际开发中，不需要自己配置webpack

拓展

@的使用

在平常我们导入其他js的文件，如下，在src/js/info.js中导入src/msg.js：

import msg from '../../msg.js'

1. 建议大家使用 @，表示 src 源代码目录，从外往里查找，不要使用 …/ 从里往外找

import msg from '@/msg.js'

2. 使用@前，在webpack.config.js中，添加如下配置：

module.exports = {
	resolve: {
		alias: {
			// 告诉webpack，程序员写的 @ 代表 src 这一层目录
			'@': path.join(__dirname, './src/')
		}
	}
}

END