webpack 从 0 开始配置

439 阅读1分钟

前言

一直对 webpack 一知半解,借助分享的机会从 0 开始学习 webpack。今天是 webpack 系列的第一课,从 0 开始配置 webpack,从而能够脱离 create-react-app 这样的工具。

初始化项目

  1. 初始化 npm
  2. 安装 webpack
  3. 新建 src 文件
  4. 初次打包构建
  5. 安装 webpack-cli(4 以后都需要安装cli,把启动等一些内容放到了 cli 中)
  6. 再次打包构建

配置 webpack 的基础配置

  1. entry 单入口和多入口
  2. output 单入口和多入口 占位符 [name]、[hash] 指定 hash 位数
  3. mode: development、production、none

配置script 快速打包入口

webpack 软连接,快速打包

配置 react 环境,支持 es6

  1. 安装依赖 react 、 react-dom 、babel-loader、@babel/core、@babel/preset-react、@babel/preset-env
  2. 配置 babel presets
  3. 配置 loader (test use)

自动生成 HTML 页面并插入静态资源

  1. 安装 plugin (html-webpack-plugin)
  2. 配置 plugin

自动清理生成的静态文件

  1. 安装 plugin (clean-webpack-plugin)
  2. 配置 plugin

解析css、less文件,认识一些常用的loader

webpack 本身只支持解析 js 和 json 文件 less-loader、css-loader、style-loader