1.webpack介绍

1.1 现代 javascript 应用程序的 静态模块打包器 (module bundler)

静态: 文件资源

1.2 除了合并代码, 还可以翻译和压缩代码

less/sass -> css

less/sass -> css

html/css/js -> 压缩合并

2.使用webpack前准备工作

2.1 webpack依赖Node环境

2.2 npm或yarn等模块管理工具

node.js官网地址:Node.js

yarn官网:Yarn 中文文档

注意:

1.建议不要安装到中文路径下

2.如果报错参考报错文档: https://lidongxuwork.gitee.io/error/#811 

3.使用前准备

3.1 创建webpack基础使用文件夹

3.2 初始化包环境

yarn init

3.安装依赖包         

为何指定版本: 版本要一对应,防止以后包更新, 造成内容报错

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D

4.在package.json中, 配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

4.webpack配置修改

4.1 修改默认入口和出口

默认入口: src/index.js          

默认入口: src/index.js

配置文档:概念 | webpack 中文文档

1.项目根目录 - 新建webpack.config.js文件 (默认配置文件名)

2.填入配置项

const path = require("path")

module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}

5. webpack-打包流程图

5.1 打包命令:

yarn build

5.2 运行yarn build发生了什么? 敲击命令, 代码执行过程

5.3 代码源文件和webpack之间关系图

源码一定要和入口产生直接/间接引入关系, 才会被一起打包

6.webpack-插件-自动生成html文件

 6.1 下载插件

yarn add html-webpack-plugin@5.3.1  -D

 6.2 webpack.config.js配置

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ]
}

 6.3 重新打包后观察dist下

自动生成html文件

自动引入打包后js文件

7.webpack-加载器-处理css文件问题

7.1 安装依赖

yarn add css-loader@5.2.1 style-loader@2.0.0  -D

7.2 webpack.config.js 配置

module.exports = {
    // ...其他代码
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

7.3 执行打包命令, 观察打包后dist下

8. webpack-加载器-处理less文件

8.1 新建src/less/index.less - 设置li字体大小24px

@size:24px;
ul, li{
    font-size: @size
}

8.2 引入到main.js中

import "./less/index.less"

8.3 下载依赖包

yarn add less@4.1.1 less-loader@8.1.0 -D

8.4 webpack.config.js 配置

module: {
  rules: [ 
    // ...省略其他
    {
    	test: /\.less$/, // 匹配.less结尾文件
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

9.webpack-加载器-处理图片文件

9.1 素材文件夹/2个图文件

9.2 在css/less/index.less - 把小图片用做背景图

body{
    background: url(../assets/logo_small.png) no-repeat center;
}

9.3 在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

9.4 配置: webpack5内置处理方案, 只需要填入配置即可

webpack.config.js填写

module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
            // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
            // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
        }
    ]
}

打包后运行dist/index.html观察区别

10 webpack-加载器-处理字体文件

10.1素材文件夹/字体库fonts文件夹

10.2 在main.js引入iconfont.css

// 引入字体图标文件
import './assets/fonts/iconfont.css'

10.3在public/index.html使用字体图标样式

<i class="iconfont icon-weixin"></i>

10.4 配置 :webpack5, 用asset module技术

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',  // 当做静态资源直接复制文件
    generator: {
    	filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
    }
}

11 webpack-加载器-处理高版本js语法

1.让webpack, 对高版本js语法降级

2.介绍:

babel编译器=> 用于处理高版本 js语法 的兼容性 babel官网

webpack配合babel-loader 对js语法做处理 babel-loader文档

3.步骤:

11.1 src/main.js - 编写箭头函数

const fn = () => { // 高级语法
  console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来

11.2 安装包

yarn add -D babel-loader@8.2.2 @babel/core@7.13.15 @babel/preset-env@7.13.15

11.3 webpack.config.js 配置规则

module: {
    rules: [
        {
            test: /\.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }
    ]
}

11.4 打包后观察dist/的js文件, 自动变成普通函数

12.webpack-开发服务器-学习

12.1学习目的

1. 构建入口和所有模块依赖关系图

2. 磁盘读取对应的文件到内存, 才能加载

3. 用对应的 loader 进行处理和翻译

4. 将处理完的内容, 输出到内存里而非磁盘上

5. 以后代码变化, 自动更新打包变化的代码, 显示到浏览器上

12.2 步骤

1.下载包

yarn add webpack-dev-server@3.11.2 -D

2.配置自定义命令serve

scripts: {
	"build": "webpack",
	"serve": "webpack serve"   //服务器命令
}

3.运行命令-启动webpack开发服务器

yarn serve
#或者 npm run serve

4.启动一个web服务器和端口, 在浏览器访问查看

效果: 以后改src下的代码, 自动打包更新到浏览器上

13.webpack-开发服务器-配置

配置文档:webpack-dev-server配置文档

13.1 webpack.config.js中添加服务器配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000, // 端口号
      open: true // 启动后自动打开浏览器
    }
}

13.2 重启开发服务器观察效果即可

ctrl + c //停止服务器
//重启服务器
yarn serve
#或者 npm run serve

14.webpack-项目打包发布

项目做完了, 要上线怎么办

14.1 执行之前的yarn build产生dist目录

所有代码, 被整合打包

14.2 把dist目录交给后台/运维, 部署给客户使用即可

开发环境的代码不用发