深入理解Webpack及其基本用法

什么是webpack？

webpack是前端资源打包工具，可以将所有的前端资源打包成静态资源。

webpack的五大核心

入口 entry ：要打包的源文件
出口 output：打包生成的文件放在哪里
加载器 loader：用于配置webpack内核处理不了的文件，用加载器去处理
插件 plugins：webpack官方开发了一些扩展功能，以插件形式存在
模式 mode：开发模式（开发过程中用的资源**.js）和生产模式（上线环境中用的资源**.min.js ）

webpack的基本用法

第1步：创建项目，创建包描述文件package.json

npm init -y //创建包描述文件

第2步：安装webpack

npm i webpack@5.12.0 -D //安装指定版本的webpack
npm i webpack-cli@4.5.0 -D //安装webpack-cli

第3步：创建webpack配置文件，文件名 webpack.config.js

第4步：创建示例文件 src/index.js

第5步：配置webpack打包参数

module.exports = {
    //入口
    entry: './src/index.js',

    //出口
    output: {
        filename: 'bundle.js', //打包生成的文件名
        path: __dirname + '/dist'
    },

    //加载器
    module: {
        //..加载器规则
    },

    //插件
    plugins: [
        //插件数据
    ],

    //模式 development开发模式 production生产模式
    mode: 'development',
}

第6步：修改package.json，添加打包命令

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

第7步：执行命令，开始打包

yarn build
或
npm run build