摘要：介紹背景最近和部門老大，一起在研究團(tuán)隊(duì)前端新手村的建設(shè)，目的在于幫助新人快速了解和融入公司團(tuán)隊(duì)，幫助零基礎(chǔ)新人學(xué)習(xí)和入門前端開發(fā)并且達(dá)到公司業(yè)務(wù)開發(fā)水平。

最近和部門老大，一起在研究團(tuán)隊(duì)【EFT - 前端新手村】的建設(shè)，目的在于：幫助新人快速了解和融入公司團(tuán)隊(duì)，幫助零基礎(chǔ)新人學(xué)習(xí)和入門前端開發(fā)并且達(dá)到公司業(yè)務(wù)開發(fā)水平。

本文也是屬于【EFT - 前端新手村】的一部分，用來幫助新人快速入門 Webpack4，內(nèi)容偏基礎(chǔ)，當(dāng)然也可以作為復(fù)習(xí)材料~~這里分享給各位小伙伴啦！

我將從最基礎(chǔ)的【項(xiàng)目初始化】開始介紹，到【處理 CSS / JS / 圖片】，到【熱更新，打包優(yōu)化】等等，一一介紹和實(shí)踐。

文章共分為 18 章，關(guān)于最基礎(chǔ)的四個(gè)核心概念，可以到我整理的另一篇文章 《Webpack4 的四個(gè)核心概念》 中學(xué)習(xí)。

新建并進(jìn)入文件夾 leo:

mkdir leo
cd leo

然后本地安裝 webpack 和 webpack-cli （在 Webpack 4.0以后需要多帶帶安裝）：

npm install webpack webpack-cli --save-dev

初始化項(xiàng)目結(jié)構(gòu)：

+ ├─package.json
+ ├─dist          // 存放最終打包的文件
+ │  └─index.html
+ ├─src           // 存放入口文件等開發(fā)文件
+ │  └─index.js
+ ├─webpack.config.js  // webpack的配置文件

安裝 lodash：

npm install lodash --save-dev

--save 可以簡(jiǎn)寫為-S, --save-dev可以簡(jiǎn)寫為-D.

開發(fā) index.js：

import _ from "lodash";

function createElement(){
    let div = document.createElement("div");
    div.innerHTML = _.join(["my", "name", "is", "leo"], "");
    return div;
}
document.body.appendChild(createElement());

開發(fā) webpack.config.js：

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    mode: "development",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    }
}

開始第一次打包任務(wù)：

npx webpack

// 輸出：

Hash: 030b37b6b9a0b4344437
Version: webpack 4.39.1Time: 308ms
Built at: 2019-08-07 08:10:21
  Asset     Size  Chunks             Chunk Names
main.js  552 KiB    main  [emitted]  main
Entrypoint main = main.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built][./src/index.js] 225 bytes {main} [built]
    + 1 hidden module

打包成功后，生成的文件會(huì)保存在 dist 目錄中。

現(xiàn)在在 dist/index.html 中引入打包后的 main.js，打開瀏覽器測(cè)試：

這一部分，我們開始學(xué)著使用 webpack 去處理 css 相關(guān)的模塊。

在項(xiàng)目 src 目錄中，新建 style 文件夾，并新建 index.css 文件：

  ├─package.json
  ├─dist          // 存放最終打包的文件
  │  └─index.html
  ├─src           // 存放入口文件等開發(fā)文件
  │  ├─index.js
+ │  └─style
+ │     └─index.css
  ├─webpack.config.js  // webpack的配置文件

接著在 index.js 的新建元素方法中，添加 class 為 box，這樣新建的元素就帶有 box 的 class 屬性：

// src/index.js

import _ from "lodash";
import "./style/index.css";// 引入樣式文件

function createElement(){
  let div = document.createElement("div");
  div.innerHTML = _.join(["my", "name", "is", "leo"], "");
+ div.className = "box";
  return div;
}
document.body.appendChild(createElement());

然后在 index.css 文件為 box ：

// src/style/index.css

.box{
    color: red;
}

注意：

這里使用 import "./style/index.css"; 引入我們的樣式文件，是沒辦法解析使用，這時(shí)我們需要在 webpack 中使用到第三方 loader 插件，這里我們使用：

css-loader ： 用于處理 css 文件，使得能在 js 文件中引入使用；

style-loader ： 用于將 css 文件注入到 index.html 中的