webpack基本配置、开发者模式介绍

1. webpack五大核心概念

A.entry（入口）

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

B.output（输出）

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

C.loader（加载器）

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

D.plugins（插件）

扩展 Webpack 的功能

E.mode（模式）

主要由两种模式：

• 开发模式：development
• 生产模式：production

2.准备webpack配置文件

在项目根目录下新建文件：webpack.config.js

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

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

3.修改配置文件

1. 配置文件

   const path=require('path')
   module.exports={
       entry:"./src/main.js",
       output:{
           path:path.resolve(__dirname,"dist"),
           filename:"main.js"
       },
       // 加载器
       module:{
           rules:[]
       },
       plugins:[],
       mode:"development",
   }

2. 运行指令

   npx webpack

4.开发者模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

1. 编译代码，使浏览器能识别运行

开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

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

提前检查代码的一些隐患，让代码运行时能更加健壮。

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。