关于webpack的基本使用

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

我们将webpack输出的文件叫做bundle

开发模式：仅能编译JS中的ES Module语法

生产模式：能编译JS中的ES Module 语法，还可以压缩js代码

先设置入口文件main.js

初始化

npm init -y

下载依赖的webpack包

npm i webpack webpack-cli -D

调用webpack包里面的打包工具 --开发环境

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

小结： webpack本身功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错

基本配置

1.entry（入口）

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

2.output（输出）

指示webpack打包完的文件输出到那里去，如何命名等

3.loader（加载器）

webpack本身只能处理js，json等资源，其他资源需要借助loader，webpack才能解析

4.plugins（插件）

扩展webpack的功能

5.mode（模式）

主要两种模式：

开发模式：development

生产模式：production

先在目录下面创建一个文件

webpack.config.js

在webpack里面配置

const path = require('path'); // nodejs核心模块，专门用来处理路径的问题

module.exports = {
    // 入口
    entry:'./src/main.js',// 相对路径
    // 输出
    output:{
        // 文件的输出路径
        // __dirname nodejs 的变量，代表当前文件的文件夹目录
        // path.resolve()方法返回一个绝对路径
        path:path.resolve(__dirname,"dist"),// 绝对路径
        filename:'main.js',
    },
    // 加载器
    module:{
        rules:[
            // loader的配置
        ],
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode:'development',
}

开发模式介绍

是我们开发代码的时候的模式

主要做两件事：

1，编译代码，是浏览器能识别通过

2.代码质量检查，树立代码的规范