从零搭一个前端构建脚手架：Webpack 实践

wuwenzen@outlook.com (wuwj) — Thu, 05 Sep 2019 00:00:00 +0000

那会儿刚开始上手 Webpack 的时候，看官方文档一堆术语：entry、output、loader、plugin，看得云里雾里。直到自己从零搭了一套非常简陋的脚手架，才真正把这些概念串起来。

这篇文章就用一个「最小可用前端脚手架」为例，帮你把 Webpack 入门阶段最常见的概念打通。

目标：一个最小可用的前端脚手架

希望做到：

支持打包 ES6 代码（import、箭头函数 等）。
支持打包 CSS。
支持本地开发服务器 + 热更新。
打包输出一份 dist，可以直接丢到静态服务器上跑。

目录长这样：

my-webpack-starter
├── package.json
├── webpack.config.js
├── /src
│   ├── index.js
│   └── index.css
└── /dist  # 构建后生成

第一步：初始化项目

mkdir my-webpack-starter
cd my-webpack-starter
npm init -y

安装 Webpack 相关依赖：

npm install webpack webpack-cli webpack-dev-server --save-dev

第二步：准备一个简单入口文件

src/index.js：

import './index.css';

const root = document.getElementById('app');
root.innerText = 'Hello Webpack Starter!';

src/index.css：

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#app {
  padding: 24px;
  font-size: 20px;
}

public/index.html（作为模板）：

构建工具 on Saiga

从零搭一个前端构建脚手架：Webpack 实践

目标：一个最小可用的前端脚手架

第一步：初始化项目

第二步：准备一个简单入口文件