vue静态模块打包工具

1.webpack是, 静态模块打包工具, 分析翻译, 压缩, 打包代码

⚫ 支持所有类型文件的打包

⚫ 支持less/sass => css

⚫ 支持ES6/7/8 => ES5

⚫ 压缩代码, 提高加载速度

webpack作用是?

➢ 识别 , 翻译 , 压缩 , 打包代码

---

2.webpack-使用前-环境准备

webpack本质: node环境下的包

1. 初始化包环境

yarn init 

2. 安装依赖包

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

3. 配置scripts (自定义命令)

scripts: {
	"build": "webpack"
}

使用webpack, 需要做哪些准备?

➢ 初始化包环境, 得到 package.json 文件

➢ 下载webpack 和 webpack-cli 包

➢ 配置自定义命令, 为打包做准备

---

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

配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/

1.

下载插件

yarn add html-webpack-plugin@5.3.1  -D

2.webpack.config.js配置

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

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

---

4.webpack-加载器-处理css文件

1.安装依赖

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

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"]
          }
        ]
    }
}

---

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

下载

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

webpack.config.js 配置

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

---

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

webpack.config.js填写

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