Vue基础铺垫 package

下载yarn
下载：yarn add 包
移除：yarn remove 包

1.初始化 yarn init 
安装webpack依赖包  yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
配置自定义命令：在package.json中加入
scripts: {
"build": "webpack"
}

2.webpack的基本使用
导出export
导入import
yarn build
更新打包，会自动覆盖原dist,  结果压缩极致
3.修改配置
创建webpack.config.js文件
const path=require("path")
module.exports = {
    entry: "./src/main.js",                          // enter: 入口(默认)
    output: { 
        path: path.join(__dirname, "dist"),   // 出口"文件夹"名(默认)
        filename: "bundle.js"                       // 出口"文件"名
    }
}
4.webpack打包流程

5.在浏览器上输出html页面

由于浏览器不支持import语法，处理方法：

将webpack翻译打包后输出到bundle.js再引用

html页面引入翻译打包后的js即可正常使用

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

下载：yarn add html-webpack-plugin@5.3.1  -D

配置：webpackage.config.json

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

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

 

重新打包后观察dist下：

• 自动生成html文件

• 自动引入打包后js文件

7.webpack-加载器-处理css，less文件

 1.原因：webpack默认只识别js文件

所以能需要一个loader来支持这种类型文件, 解析css，less代码

2.下载style loader ，less loader less loader加载程序

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

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

3.配置文件，在webpackage.config.json中配置文件

 module: {//模块
        // 如何处理项目中不同模块文件  加载器loader
        rules: [
            // 规则
            {
                test: /\.css$/i, // 匹配所有的css文件
                // use数组里从右向左运行
                // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
                // 再用 style-loader 将样式, 把css插入到dom中
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i, // 匹配.less结尾文件
                // 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码 
         成css代码  //从左到右执行不能改顺序
                use: ["style-loader", "css-loader", "less-loader"],
            }
        ],
    }

8.webpack-加载器-处理图片文件差异

1.把小图片用做背景图 ，大图插入到创建的img标签上, 添加body上显示

 小于8kb的, 转成data URI片转成base64字符串打包进js中)
 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)

好处: 减少http请求次数

大图插入如图所示：

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

配置如下

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

9.webpack-加载器-处理字体文件

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

2.webpack.config.js 配置

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',  // 当做静态资源直接复制文件
    generator: {
    	filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
          // [name] 占位符-还使用源文件的名字
          // [hash:6] 随机产生6位的hash值-防止跟别的文件重名
          // [ext] 占位符-使用源文件的扩展名 (.ttf / .woff)
    }
}

3.实现

首先有字体图标文件，再通过main.js引入

import "./assets/fonts/iconfont.css"
const theI = document.createElement('i')
theI.className = 'iconfont icon-qq'
document.body.appendChild(theI)