【Webpack】319- Webpack4 入门手册（共 18 章）（上）

介绍

1. 背景

最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。

本文也是属于【EFT - 前端新手村】的一部分，用来帮助新人快速入门 Webpack4，内容偏基础，当然也可以作为复习材料~~这里分享给各位小伙伴啦！

2. 文章概要

由于本文篇幅较长，将分为《Webpack4入门手册（上）（共 18 章）》和《Webpack4入门手册（下）（共 18 章）》两篇文章发布，请联系起来看~

我将从最基础的【项目初始化】开始介绍，到【处理 CSS / JS / 图片】，到【热更新，打包优化】等等，一一介绍和实践。

文章共分为 18 章，关于最基础的四个核心概念，可以到我整理的另一篇文章 《Webpack4 的四个核心概念》 中学习。

《Webpack4 的四个核心概念》 https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Webpack/guide/README.md

3. 教程目录

一、 项目初始化

1. 初始化 demo

新建并进入文件夹 leo:

mkdir leo	
cd leo

然后本地安装 webpack 和 webpack-cli （在 Webpack 4.0以后需要单独安装）：

npm install webpack webpack-cli --save-dev

初始化项目结构：

+ ├─package.json	
+ ├─dist          // 存放最终打包的文件	
+ │  └─index.html	
+ ├─src           // 存放入口文件等开发文件	
+ │  └─index.js	
+ ├─webpack.config.js  // webpack的配置文件

安装 lodash：

npm install lodash --save-dev

--save 可以简写为 -S, --save-dev可以简写为 -D.

开发 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());

开发 webpack.config.js：

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

2. 打包测试

开始第一次打包任务：

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

打包成功后，生成的文件会保存在 dist 目录中。

现在在 dist/index.html 中引入打包后的 main.js，打开浏览器测试：

<script src="./main.js"></script>

二、 webpack 处理 CSS 模块

这一部分，我们开始学着使用 webpack 去处理 css 相关的模块。

1. 修改代码

在项目 src 目录中，新建 style 文件夹，并新建 index.css 文件：

  ├─package.json	
  ├─dist          // 存放最终打包的文件	
  │  └─index.html	
  ├─src           // 存放入口文件等开发文件	
  │  ├─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'; 引入我们的样式文件，是没办法解析使用，这时我们需要在 webpack 中使用到第三方 loader 插件，这里我们使用：

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