webpack4教程（初识篇）

目录
一、webpack是什么
二、核心概念
三、开发准备
四、认识webpack配置文件

系列教程
webpack4教程（入门篇）
webpack4教程（番外篇）

---

一、webpack是什么

  图中可以看出，webpack的功能是将一堆关系复杂的文件，整理成一堆更清晰的文件。因此，webpack的核心职责，就是解决依赖关系。
  项目依赖，也称为依赖包，解决依赖关系并产出，这一过程俗称“打包”。总而言之，webpack是一款优秀的前端工程化必备的打包工具。

webpack

---

二、五大核心概念

中文名	英文名	概述
入口	entry	构建依赖图的开端
输出	output	打包产出位置
转换器	loader	对各种类型的模块，进行转换处理
插件	plugin	对每个任务环节，提供功能
模式	mode	设置打包环境

---

三、开发准备

1、安装

mkdir webpack-study && cd webpack-study    //创建并进入项目文件夹
yarn add webpack -D
yarn add webpack-cli -D    //webpack4命令行工具

PS：对项目而言，webpack属于工具型的依赖。因此，安装开发环境型依赖。（为了保证整个开发流程，webpack版本一致，不建议全局安装）

2、完善基本目录

mkdir src    //创建源目录
mkdir dist    //创建输出目录
touch webpack.config.js    //新建配置文件

3、基本目录

|- /node_modules
|- /dist
|- /src
|- webpack.config.js
|- package.json
|- yarn.lock

PS：在package.json中配置scripts，生成快捷命令，代替npx。

---

四、认识webpack配置文件

1、作用

把配置参数，抽离到单独的文件，便于项目配置。

2、基础格式（默认配置文件——webpack.config.js）

const path = require('path')    //便于获取路径
const 插件1 = require('插件1')
module.exports = {
  //模式——设置开发模式
  mode: 'development',
  //入口——指定src/index.js为入口文件
  entry: {
     main: './src/index.js'
  },
  //输出——指定dist/bundle.js为输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  //转换器。模块>规则
  module: {
    rules: [
      { test: /\.后缀名$/, 
        use: [
          {
            loader: '转换器1',
            options: {}    //转换器1配置
          }
        ]
      }
    ]
  },
  //插件
  plugins: [
    new 插件1({
      //插件配置
      })
  ]
}