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({
      //插件配置
      })
  ]
}

你可能感兴趣的:(webpack4教程(初识篇))