【快速搞定Webpack4】基本配置及开发模式介绍(二)

在开始使用webpack之前么,我们需要对Webpack的配置有一定的认识。
【快速搞定Webpack4】基本配置及开发模式介绍(二)_第1张图片

一、5大核心概念

1. enty(入口)
指示webpack从哪个文件开始打包

2. output(输出)
指示webpack打包完的文件输出到哪里去,如何命名等

3. loader(加载器)
webpack本身只能处理js、json等资源,其他资源需要借助loaderwebpack才能解析

4. plugins(插件)
扩展webpack的功能

5. mode(模式)
主要有两种模式:
● 开发模式:development
● 生产模式:production

二、准备 Webpack 配置文件

在项目根目录下创建文件:webpack.config.js

module.exports = {
    // 入口
    entry: "",  
    // 输出
    output: {},
    // 加载器
    module: {
        rules: [],
    },
    // 插件
    plugins: [],
    // 模式
    mode: "",
};

Webpack 是基于Node.js运行的,所以采用Common.js模块化规范

三、修改配置文件

const path = require("path");

module.exports = {
    // 入口
    entry: "./src/main.js",  // 需要用相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname nodejs的变量,代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"),   // 需要用绝对路径 需要用的Nodejs的核心模块 path,专门处理路径问题
        // 文件名
        filename: "main.js",
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
        ],
    },
    // 插件
    plugins: [
        // plugin的配置
    ],
    // 模式
    mode: "development",
};

四、开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事:
1、编译代码,使浏览器能识别和运行。
开发时我们有样式资源、字体图片、图片资源、多媒体资源、HTML资源等,webpack默认都不能处理这些,我们需要加载配置来编译这些资源

2、代码质量检测,树立代码规范
提前检查代码的一些可以消除一定隐患与Bug、代码运行起来更加健壮。
提前检查代码规范和格式,统一团队编码风格,让代码更优雅与美观。

你可能感兴趣的:(实战,前端大杂烩,webpack,前端框架,前端,js)