webpack学习笔记

初始webpack

webpack是什么？
静态资源打包工具
中文官网：https://www.webpackjs.com/concepts/
有哪些打包工具？

• gulp
• Grunt
• Pacel
• Webpack
• Rollup
• Vite

基本使用
以一个或多个文件作为打包的入口，将整个项目的文件编译打包出去，将webpack输出的文件叫做 bundle。

两种模式
开发模式：只编译JS中的ES Module语法
生产模式：能编译JS的ESM,还能压缩代码

开始使用
1.npm init 初始化
2.下载好webpack webpack-cli依赖
3.写好入口文件main.js
4.使用打包命令

npx webpack './src/main.js' --mode=development

文件打包会在dist目录下：

五个核心概念:
entry(入口)
output(输出)
loader(加载器)
plugins(插件)
mode(模式)

基本配置：
webpack.config.js

const path = require("path");

module.exports={
    // 入口文件
    entry:"./src/main.js",
    // 文件的输出路径与文件名
    output:{
        path:path.resolve(__dirname,"dist"), //绝对路径
        filename:"main.js",
    },
    //加载器
    module:{
        rules:[
            //loader的配置
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    mode:"development"
}

开发模式要完成哪些事：
1.编译代码，是浏览器识别运行
html资源，样式资源，字体图标，图片等等，webpack默认不能处理这些资源，需要加载配置来编译这些资源。
2.代码质量检查