webpack

webpack 基础

在根目录下创建 src 文件夹，需要运行的代码放在其中

初始化一个package.json

npm init -y

安装jquery (根据项目选择安装)

npm i jquery -S

在.js 文件导入

import $ from 'jquery'

安装webpack

npm i webpack@5.42.1 webpack-cli@4.7.2 -D

在根目录下新建 webpack.config.js ,并进行配置

const path = require("path"); 
// webpack 配置文件
module.exports = {
    //mode 用来指定构建模式, 可选值有 development 和 production
    mode: 'development',
    // entry: '指定要处理的文件'
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        // 输出文件的存放路径
        path: path.join(__dirname, './dist'),
        // 输出文件的名称
        filename: 'main,js'
    }
}

配置 package.json

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

运行

npm run dev

报错代码

Error: error:0308010C:digital envelope routines::unsupported

解决办法，新建环境变量：Windows 系统属性中，高级设置，编辑系统变量

// 变量名
NODE_OPTIONS
// 变量值
--openssl-legacy-provider

webpack 插件

监听代码变化

安装webpack-dev-server

npm i webpack-dev-server@3.11.2 -D

在package.json 配置 webpack-dev-server

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

npm run dev

// 出错 则

npm i --save-dev webpack-cli

再执行 npm run dev

此时需要从 http://localhost:8080/ 到浏览器

｢wds｣: Project is running at http://localhost:8080/

复制 html 页面放到根目录下

直接访问 http://localhost:8080/就可打开html页面，不需要再点击选中文件夹

安装 html-webpack-plugin

npm i html-webpack-plugin@5.3.2 -D

在webpack.config.js 配置 html-webpack-plugin

//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 和 production
    mode: 'development',
    //3.通过 plugins 节点，使 htmlPlugin 插件生效
    plugins: [htmlPlugin]
}

再 npm run dev

devServer 节点

在webpack.config.js 配置文件中，可通过 DevServer 节点对 webpack-dev-server 插件进行更多的配置

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

webpack 中的 loader 加载器

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

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

css-loader 可以打包处理 .css 相关文件

less-loader 可以打包处理 .less 相关文件

babel-loader 可以打包处理 webpack 无法处理的高级JS语法

安装 css-loader

npm i style-loader@3.0.0 css-loader@5.2.6 -D

在webpack.config.js 配置文件的 module -> rules 数组中，添加 loader规则

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

在 .js 文件中，导入css文件

import 'index.css'
// index.css 为css存放路径

安装 less-loader

npm i less-loader@10.0.1 less@4.1.1 -D

在webpack.config.js 配置文件的 module -> rules 数组中，添加 loader规则

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

打包处理 样式表中与 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|gifs$/, use: 'url-loader?limit-22229'}
    ]
}

在 .js 文件中，导入图片文件文件

import logo from '图片路径'
// logo 任意命名

// $('.box').attr('src', logo)

安装 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规则

{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}

配置 babel-loader babel.config.js

在根目录下，创建 babel.config.js 配置文件。配置如下

module.exprots = {
	// 声明 babel 可用插件
	plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]]
}

打包发布

配置 webpack 的打包发布

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

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  }

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

在webpack.config.js 配置文件的 output 节点，进行如下配置

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

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

在webpack.config.js 的 url-loader 配置项，新增 outputPath 选项即可指定图片文件地址的输出历经

// 处理图片文件 limit-22229 为图片大小限制,不能大于限制
// 在配置 url-loader 的时候，多个参数之间 使用 & 符号进行分隔
{test: /\.jpg|png|gifs$/, use: 'url-loader?limit-4708&outputPath=images'}

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

可以安装并配置 clean-webpack-plugin 插件

npm i clean-webpack-plugin@3.0.0 -D

按需导入插件、得到插件的构造函数后，创建插件的实时对象

const {CleanWebpackPlugin } = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();

把创建的 cleanPlugin 插件实时对象，挂载到 plugin 节点中

plugins: [htmlPlugin, cleanPlugin]

Source Map

Source Map 就是一个信息文件，里面存储着位置信息。就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

出错时，除错工具将显示原始代码，而不是转换后的代码，极大的方便了后期的调试

开发环境下，推荐在 webpack.config.js 中添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致

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

在发布上线后，为了安全性考虑，建议关闭Source Map

指定位行号，不显示源码，可将 devtool 的值设置为 nosources-source-map