08webpack

webpack

前端工程化

实际的前端开发：
    模块化：js的模块化、css的模块化、资源的模块化
    组件化：复用现有的ui结构、样式、行为
    规范化：目录结构的划分、编程规范化、文档规范化、Git分支管
    自动化：自动化创建、自动部署、自动化测试
概念：
    在企业级的项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化
前端工程化的解决方案
    webpack：https://www.webpackjs.com/
    parcel：https://zh.parceljs.org/

webpack的基本使用

概念：
    前端工程化的一个具体解决方案
	
主要功能：
	提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端javaScript的兼容性、性能化等强大功能
	
在项目中安装webpack
    在终端运行如下命令
    npm install webpack@5.42.1 webpack-cli@4.7.2 -D
    
在项目中配置webpack
    在项目根目录下，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置
        // 使用node.js中的导出语法导出webpack的配置对象
        module.exports = {
            // 代表webpack运行模式 可选值有两个 开发模式 development 和上线模式 production
            mode: 'development'
        }
    在 package.json 的 scripts 节点下，新增 dev 脚本如下
        "scripts": {
            "dev": "webpack"
        },
    在终端中运行 npm run dev 命令执行webpack
    
webpack4.x和5.x中默认约定
    默认的打包入口为 src -> index.js
    默认的输出文件路径为 dist -> main.js
自定义打包入口与出口
    在 webpack.config.js 配置文件中，通过 entry 节点指定打包入口，通过 output 节点指定打包的出口
    entry: path.join(__dirname, './src/index.js'),    // 打包入口路径
    output: {      // 打包出口路径
        path: path.join(__dirname, './dist'),      // 输入文件存放路径
        filename: 'main.js'       // 输出文件名称
    },

webpack插件

webpack-dev-server
    每当修改了源代码，webpack 会自动进行项目的打包和构建
    安装：
   		npm install webpack-dev-server@3.11.2 -D
    配置：
        修改 package.json -> scripts 中的 dev 命令
        "scripts": {
            "dev": "webpack serve"
        }
    	再次执行 npm run dev 命令，重新进行项目打包
    		执行时webpack-cil报错，执行以下命令
    		npm install webpack-cli@4.9.0
    	在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
    		main.js被放在内存中，需要在index.html中更改引入文件路径
    		<script src="/main.js"></script>

html-webpack-plugin
    webpack 中的 HTML 插件（类似于一个模板引擎插件）
    可以通过此插件自定制 index.html 页面的内容
    在复制出来的页面会自动注入一个在内存中打包的 main.js 脚本，不需要手动添加
    安装：
    	npm install html-webpack-plugin@5.3.2 -D
    配置：
        在 webpack.config.js 文件中导入 HTML 插件，得到一个构造函数
            // 导入html-webpack-plugin这个插件，得到这个插件的构造函数
            const HtmlPlugin = require("html-webpack-plugin");
        创建 HTML 插件的实例对象
            // new构造函数，创建插件的实例对象
            const htmlPlugin = new HtmlPlugin({
                // 指定要复制哪个变量
                template: './src/index.html',
                // 指定复制出来的文件名和存放路径
                filename: './index.html'
            })
        在配置文件中，通过 plugins 节点使 htmlPlugin 插件生效
            module.exports = {
                // 插件的数组，将来webpack在运行时，会加载并调用这些插件
                plugins: [htmlPlugin]
            }

webpack.config.js 文件中 devServer 节点用法
    devServer: {
        open: true, // 初次打包完成后，自动打开浏览器
        host: '127.0.0.1',  // 实时打包所用主机地址
        port: 80  // 实时打包所用端口号
    }

webpack中的loader

概述：
	在实际开发中，webpack 只能处理.js文件，其他非.js文件需要调用 loader 加载器中的插件才可以正常打包

作用：
    协助 webpack 打包处理特定的文件模块

css-loader: 
    可以打包处理.css相关文件
    运行 npm install 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']}
            ]
        }

less-loader: 
    可以打包处理.less相关文件
    运行 npm install less-loader@10.0.1 less@4.1.1 -D 命令，
    安装处理less文件的loader
    在 webpack.config.js 的 module -> rules 数组中，添加loader规则
        module: {  // 所有第三方模块的匹配规则
            rules: [  // 文件后缀名匹配规则
                {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
            ]
        }

url-loader:
    打包处理样式表中与url路径相关的文件
    运行 npm install url-loader@4.1.1 file-loader@6.2.0 -D 命令，
    安装处理url文件的loader
    在 webpack.config.js 的 module -> rules 数组中，添加loader规则
        module: {  // 所有第三方模块的匹配规则
            rules: [  // 文件后缀名匹配规则
                // limit用来指定图片大小，单位是字节，只有小于等于limit才能转换为base64格式的图片
                {test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'}
            ]
        }

babel-loader: 
    可以打包处理webpack无法处理的高级js语法
    运行 npm install -D babel-loader @babel/core @babel/preset-env webpack 命令，
    安装处理babel文件的loader
    在 webpack.config.js 的 module -> rules 数组中，添加loader规则
        module: {  // 所有第三方模块的匹配规则
            rules: [  // 文件后缀名匹配规则
                // exclude 排除node_modules中的包
                {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } 
            ]
        }
    在项目根目录中创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：
        module.exports = {
            // 声明 babel 可用的插件 
            // 将来webpack在调用 babel-loader 的时候会先加载 plugins 插件来使用
            plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
        }

打包发布

配置 webpack 的打包发布
    在 package.json 文件的 scripts 节点下，新增 build 命令，项目发布时运行build命令
    --made: 是一个参数项，用来指定 webpack 的运行模式
    production： 代表生产环境，会对打包生成的文件进行代码压缩和性能优化
        "scripts": {
            "dev": "webpack serve",
            "build": "webpack --mode production"
        }

优化图片和js文件存放路径
    在 webpack.config.js 文件中修改 output 从而更改js文件位置
    // 打包出口路径
    output: {
        // 输入文件存放路径
        path: path.join(__dirname, './dist'),
            // 输出文件名称
            filename: 'js/main.js'
    },
    在 webpack.config.js 文件中在第三方模块加载中添加 outputPath=img
        module: {  // 所有第三方模块的匹配规则
            rules: [  // 文件后缀名匹配规则
                // 在配置url-loader的时候多个参数之间用 & 连接
                {test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=img'},
            ]
        }

自动清理 dist 目录下的旧文件
    为了每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件
    	安装清理 dist 目录的 webpack 插件
    	npm install clean-webpack-plugin@3.0.0 -D
	在 webpack.config.js 中导入构造函数
		const { CleanWebpackPlugin } = require('clean-webpack-plugin');
	在 plugins 数组中添加如下代码
		new CleanWebpackPlugin()

Source Map

概念：
    Source Map 就是一个信息文件，里面存储这位置信息
    在开发环境下默认生成的 Source Map 记录的是生成后代码的位置，
    导致运行时报错的行数与源代码的行数不一致
解决默认问题：
    在开发过程中：
        在 webpack.config.js 配置文件中添加如下配置，解决运行时报错的行数与源代码的行数保持一致
        module.exports = {
            // 在开发调试阶段，解决运行时报错的行数与源代码的行数保持一致
            devtool: 'eval-source-map'  
        }
    在生产环境下：
    	1、省略 devtool 选项，最终文件不会包含 Source Map 防止源代码泄露 
    	2、只定义行号不暴露源码：
    		将devtool的值设置为 nosources-source-map
            module.exports = {
                // 在生产环境下，只定义行号不暴露源码
                devtool: 'nosources-source-map'  
            }

扩展

 文件查找方式
	../ 代表目前所在文件的上一级文件，从里向外查找
    @ 代表src源代码的根目录，从外向里查找（推荐使用）
    @ 不能直接使用需要在 webpack.config.js 配置文件中添加如下代码
        module.exports = {
            resolve: {
                alias: {
                    // 告诉 webpack 程序员所写的代码中 @ 表示 src 这一层目录
                    '@': path.join(__dirname, './src')
                }
            }
        }