一、本項(xiàng)目使用 yarn 進(jìn)行包管理

初始化項(xiàng)目，生成 package.json。

$ yarn init

// package.json
{
  "name": "webpack4_demo",
  "version": "1.0.0",
  "description": "從零到一搭建 react 項(xiàng)目",
  "main": "index.js",
  "repository": "git@github.com:toFrankie/webpack4_demo.git",
  "author": "Frankie <1426203851@qq.com>",
  "license": "MIT",
  "private": true
}

關(guān)于 yarn 常用命令，可以看下這篇文章【yarn 使用以及 npm 的遷移】。

二、修改項(xiàng)目目錄

• assets：存放一些靜態(tài)文件
• config：存放一些配置配置文件
• src：項(xiàng)目資源，并添加 index.js 作為項(xiàng)目入口文件

二、使用 webpack 作為打包工具

*本項(xiàng)目使用 webpack 4.x 版本。

1. 安裝依賴包

注意，需要同時(shí)安裝 webpack-cli。因?yàn)閺?webpack 4.x 起，將原先存在于一個(gè)依賴包的拆分成 webpack 和 webpack-cli 兩個(gè)依賴包。

In webpack 3, webpack itself and the CLI for it used to be in the same package, but in version 4, they've separated the two to manage each of them better.

$ yarn add webpack@4.41.2
$ yarn add webpack-cli@3.3.10

命令執(zhí)行，依賴包會(huì)被放置在 node_modules 目錄，同時(shí)生成 yarn.lock 鎖文件（類(lèi)似 npm v5 的 package-lock.json）。

與此同時(shí)，package.json 會(huì)發(fā)生變化。它記錄了我們所安裝的包以及對(duì)應(yīng)包的版本號(hào)。

{
  "dependencies": {
    "webpack": "4.41.2",
    "webpack-cli": "3.3.10"
  }
}

2. webpack 配置

從 v4.0.0 開(kāi)始，webpack 可以不用再引入一個(gè)配置文件來(lái)打包項(xiàng)目，然而，它仍然有著高度可配置性，可以很好滿足你的需求。

在此之前版本，需要類(lèi)似 webpack.config.js 配置文件才能打包。

它的默認(rèn)入口文件是 src/index.js。

3. webpack 打包

我們可以在 package.json 添加 scripts 字段來(lái)配置 NPM 腳本。

"scripts": {
  "build": "webpack --progress --colors"
}

執(zhí)行命令 yarn run build，我們看下會(huì) webpack 會(huì)幫我做些什么工作?

結(jié)合上圖，說(shuō)明了什么：

• webpack 的默認(rèn)入口文件（entry point）是 ./src/index.js。
• webpack 的默認(rèn)輸出目錄（output）是 ./dist。它的默認(rèn)打包 filename 是 main.js。

4. webpack 打包（題外話）

我們?cè)?/src 目錄下，新建 main.js。

// main.js
console.log('This is main.js!')

也可以通過(guò) npx webpack ./src/main.js -o ./build/bundle.js 來(lái)打包并輸出。
但我們項(xiàng)目一般不會(huì)這樣使用，不再贅述了。

四、至此

webpack 最簡(jiǎn)單的配置以及打包已經(jīng)學(xué)會(huì)了，接著會(huì)介紹 webpack 配置以及 react 搭配。

最后附上：

// package.json
{
    "name": "webpack4_demo",
    "version": "1.0.0",
    "description": "從零到一搭建 react 項(xiàng)目",
    "main": "src/index.js",
    "repository": "git@github.com:toFrankie/webpack4_demo.git",
    "author": "Frankie <1426203851@qq.com>",
    "license": "MIT",
    "private": true,
    "scripts": {
        "build": "webpack --progress --colors"
    },
    "dependencies": {
        "webpack": "4.41.2",
        "webpack-cli": "3.3.10"
    }
}