webpack笔记(一)

该笔记参考自尚硅谷2022版Webpack5入门到原理（面试开发一条龙）

基本使用

webpack是一个静态资源打包工具

它会一个或多个文件作为打包入口，将整个项目所有文件编译组合成一个或多个文件输出出去，输出的文件是可以直接在浏览器端运行的。我们将webpack输出文件称为bundle

功能介绍

webpack本身功能是有限的:

开发模式:仅能编译es6模块化语法

生产模式:能编译es6模块化语法和压缩代码

开始使用

教程中只是用一个例子验证了下webpack只能编译es6模块化语法.

首先创建一个项目目录,在控制台输入npm init -y,这一步是创建默认的package.json, 对项目进行初始化操作，对包进行管理.

第二步将package.json中的name配置项改名，改成啥都行只要不是webpack，否则你接下来的安装包会失败。

第三步安装webpack和webpack cli，输入命令npm i webpack webpack-cli -D，其中-D表示下载到开发依赖中

第四步使用webpack将输入文件编译，输入命令npx webpack ./src/main.js --mode=development，npx的意思是临时把node_modules/bin这个目录作为环境变量，可以执行其中的一些脚本，如这里的webpack，./src/main.js就是输入的入口文件，--mode=development表示在开发环境下编译，那么只会编译es6模块化语法而不会压缩代码。

 在命令成功执行后，当前工作目录下会多出一个dist文件，里面就是输出文件main.js，现在再给scrpit标签的src属性指定这个main.js的路径，即可正常加载js脚本，原因是它将es6语法编译成了浏览器能解析的代码。

五大核心概念

1. entry入口

指示webpack从哪个文件开始打包

2. output输出

指示webpack打包完的文件输出到哪里去

3. loader加载器

webpack本身只能处理js和json文件，其他资源诸如css,img需要对应的loader才能处理

4. plugins插件

扩展webpack的功能

5. mode模式

主要有开发模式(development)和生产模式(production)

了解了五大核心概念后，就可以看最基本的webpack配置文件了，在工作目录下新建一个webpack.config.js，写入如下内容

const path = require('path')

module.exports = {
    //入口，相对路径
    entry:'./src/main.js',
    //输出
    output:{
        //输出路径要求绝对路径
        //__dirname表示当前文件夹目录
        path:path.resolve(__dirname,'dist'),
        filename:'main.js'
    },
    //加载器
    module:{
        //loader配置
        rules:[]
    },
    //插件
    plugins:[

    ],
    //模式
    mode:'development'
}

在控制台窗口输入命令npx webpack，它就会自动找到webpack.config.js按照里面描述的规则进行编译输出。我们可以看到dist文件下的main.js，是与我们第一次使用npx webpack ./src/main.js --mode=development的效果是一样的。