【笔记】webpack

定义

现代 javascript 应用程序的 静态模块打包器 (module bundler)，基于nodejs使用
就是把多个文件打包整合到一起(模块化), 缩小项目体积, 提高加载速度

webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。

tips: Yarn是facebook发布的一款取代npm的包管理工具。

使用

在新建的项目中初始化包环境
yarn init -y
然后添加webpack依赖包
yarn add webpack webpack-cli --dev
然后用vscode打开
code .
在根目录下新建src目录，在src中书写js文件，在src外书写html文件
然后打开vscode命令行，输入：
npx webpack
打包完成的内容在dist文件夹里，这样就是一个最简单的webpack打包

有export和import

在src下新建一个data.js

export function getBlogPosts () {
    return ["blog1","blog2","blog3"];
}

在index.js中引入使用

import { getBlogPosts } from "./data";

console.log(getBlogPosts)

再次使用npx webpack打包
main.js中的数据变为

(()=>{"use strict";console.log((function(){return["blog1","blog2","blog3"]}))})();

对引用进行了简化

配置文件webpack.config.js

新建在根目录下

const path = require("path");

module.exports = {
    mode: "development",//开发者模式
    entry: "./src/index.js",//入口文件
    output: {
        filename: "dist.js",//输出文件名字
        path:path.resolve(__dirname,"dist"),//输出文件路径
    }
}

包含css文件

需要终端安装两个loader
yarn add --dev style-loader css-loader
然后需要去配置文件里配置，这样才知道什么样的文件扩展名使用什么loader

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "dist.js",
        path:path.resolve(__dirname,"dist"),
    },
    module:{
        rules: [{
            test:/\.css$/i,//正则表达式匹配扩展名
            use:["style-loader","css-loader"]//要使用什么loader
        }]
    }
}

其他类型文件也同理

静态文件

静态文件可以使用webpack内置的loader，不用额外下载

{
            test:/\.(png|jpg|jpeg|svg|gif)$/i,
            type:"asset/resource",//需要注意的是这里使用的是type不是use
        }