关于yarn包管理工具与webpack打包工具

yarn init 初始化

yarn add 包名(@版本号，--可不写)

yarn remove jquery 移除包

yarn 会根据当前项目package.json记录的包名和版本, 全部下载到当前工程中

yarn global add 包名 全局安装 移除同理

初始化环境，安装完依赖包后，配置scripts（自定义命令）：

scripts: {
	"build": "webpack"
}

新建目录src并新建js，就绪后运行打包命令yarn build : npm run build

关于 webpack.config.js的配置

创建 webpack.config.js文件

填入配置项

const path = require("path")

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

打包流程图

文档查询地址：

自动生成html：

HtmlWebpackPlugin | webpack 中文网

处理css文件：

style-loader文档

css-loader文档

处理less:

less-loader文档

处理图片：

asset module文档

图片转成base64字符串好处是不需要再发送请求，可以直接读取，但是缺点是会增大图片30%体积

处理字体文件：

{ // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',
    generator: {
    	filename: 'font/[name].[hash:6][ext]'
    }
}

由于在实际工作中每次重新打包会占用大量时间，为提高效率，可以使用webpack-dev-serve本地服务器通过以下步骤实时更新：

1.下载包

yarn add webpack-dev-server -D

2.配置自定义命令

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

 3.运行服务器：

yarn serve或者 npm run serve

关于webpack-dev-server配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000 // 端口号
    }
}

webpack的作用是用来管理压缩文件，提高加载速度，减少文件大小