002 webpack基础 - webpack配置

[A] webpack五大核心概念

    1. entry

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

    2. output

        提示webpack打包完的我呢见输出到哪去，如何命名

    3. loader

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

    4. plugin

        拓展webpack的功能

    5. mode 模式

        webpack主要有两种模式：

            开发模式：development

            生产模式：production

 

[B] webpack.config.js 的配置

　　1. webpack的配置文件，需写在项目的根目录下，并且命名也是固定的 webpack.config.js

　　2. weback的配置文件，是通过commenJS的语法加载的，因此，需使用commenJS的语法导出

        module.exports = {
            ...
        }

　　3. 配置文件中主要配置五大核心内容，附加一些辅助信息

        const path = require('path')
        module.exports = {
            // 入口 要求相对路径
            entry: './src/main.js',
            // 出口
            output: {
                // 输出路径 要求绝对路径
                path: path.resolve(__dirname, 'dist'),
                // 文件名
                filename: 'main.js',
                // 打包前是否清空output目录
                clean: true
            },
            // 加载器
            module: {
                rules: [
                    // loader的配置
                ]
            },
            // 插件
            plugins: [
                // 插件配置
            ],
            // 模式
            mode: 'production',
        }

 

[D] 开发模式: 即开发代码时的模式

    开发模式下,我们主要要做两件事:

        1. 编译代码, 使浏览器可以识别

            开发时, 有css, 字体图标, 图片资源, html资源等, webpack默认都不能处理这些资源, 因此, 我们需要加载配置来编译这些资源

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

            提前检查代码隐患, 提升代码健壮性