前言
一直对 webpack 一知半解,借助分享的机会从 0 开始学习 webpack。今天是 webpack 系列的第一课,从 0 开始配置 webpack,从而能够脱离 create-react-app 这样的工具。
初始化项目
- 初始化 npm
- 安装 webpack
- 新建 src 文件
- 初次打包构建
- 安装 webpack-cli(4 以后都需要安装cli,把启动等一些内容放到了 cli 中)
- 再次打包构建
配置 webpack 的基础配置
- entry 单入口和多入口
- output 单入口和多入口 占位符 [name]、[hash] 指定 hash 位数
- mode: development、production、none
配置script 快速打包入口
webpack 软连接,快速打包
配置 react 环境,支持 es6
- 安装依赖 react 、 react-dom 、babel-loader、@babel/core、@babel/preset-react、@babel/preset-env
- 配置 babel presets
- 配置 loader (test use)
自动生成 HTML 页面并插入静态资源
- 安装 plugin (html-webpack-plugin)
- 配置 plugin
自动清理生成的静态文件
- 安装 plugin (clean-webpack-plugin)
- 配置 plugin
解析css、less文件,认识一些常用的loader
webpack 本身只支持解析 js 和 json 文件 less-loader、css-loader、style-loader