【Cute-Webpack】Webpack4 入门手册（共 18 章）-深蓝源码网

介绍

1. 背景

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

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

2. 文章概要

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

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

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 文件中引入使用；
• style-loader ： 用于将 css 文件注入到 index.html 中的 <style> 标签上；

2. 安装配置插件

安装插件：

npm install --save-dev style-loader css-loader

再到 webpack.config.js 中添加 css 解析的 loader 配置：

// webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }
  ]
}

参数介绍：

test：需要匹配的模块后缀名；

use：对应处理的 loader 插件名称（处理顺序是从右往左）。

3. 打包测试

npx webpack

// 输出：

Hash: 28b3965aa1b6a0047536
Version: webpack 4.39.1
Time: 482msBuilt at: 2019-08-09 07:45:25  Asset     Size  Chunks             Chunk Names
main.js  565 KiB    main  [emitted]  main
Entrypoint main = main.js
[./node_modules/_css-loader@3.2.0@css-loader/dist/cjs.js!./src/style/index.css] 190 bytes {main} [built]
[./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] 303 bytes {main} [built]
[./src/style/index.css] 447 bytes {main} [built]
    + 3 hidden modules

这时候可以看见 index.html 中，文本已经变成红色，并且 css 代码已经添加到 <style> 标签上。

三、 webpack 模块介绍和处理 sass

在这一节中，我们会介绍 webpack 中的模块，并且介绍如何去处理 sass 文件。

1. webpack 模块介绍

这里介绍的模块（module）是指 webpack.config.js 文件中的 module 配置，它决定了如何处理项目中的不同类型模块。

比如上一节介绍的，使用 style-loader 、 css-loader 两个插件去处理 css 文件。

webpack 模块支持如下语句：

• ES2015 import 语句；
• CommonJS require() 语句；
• AMD define 和 require 语句；
• css/sass/less 文件中 @import 语句；
• 样式 (url(...)) 或者 HTML 文件 (<img src=...>) 中的图片链接 (image url)；

这里建议使用 ES2015 的引入方法，毕竟这是标准。

更多参数介绍，可访问中文官网的介绍:undefined《webpack 配置选项》

2. 常用模块

2.1 module.noParse

值的类型：RegExp | [RegExp] | function

防止 webpack 解析那些符合匹配条件的文件，忽略的文件夹中不应该含有 import、require、define的调用，或任何其他导入机制，忽略的 library 可以提高构建效率。

// webpack.config.js

module: {
  noParse: function(content){
    return /jquery|lodash/.test(content);
  }
}

2.2 module.rules

创建模块时，匹配请求的规则数组。按照规则为对应模块使用对应的 loader，或修改解析器（parser）。

// webpack.config.js

module: {
  rules: [
    { test: /\.css$/, use: ['style-loader', 'css-loader']}
  ]
}

• module.rules 参数有：

use：为模块使用指定 loader，并且可以传入一个字符串数组，加载顺序从右往左。

• module.rules 匹配条件有：

{test : Condition}：匹配特定条件，非必传，支持一个正则表达式或正则表达式数组；

{include : Condition}：匹配特定条件，非必传，支持一个字符串或字符串数组；

{exclude : Condition}：排除特定条件，非必传，支持一个字符串或字符串数组；

{and : [Condition]}：必须匹配数组中的所有条件；

{or : [Condition]}：匹配数组中任一条件；

{not : [Condition]}：必须排除这个条件；

更多参数介绍，可访问中文官网的介绍:undefined《Rule》

// webpack.config.js

module: {
  rules: [
    { 
      test: /\.css$/, 
      use: ['style-loader', 'css-loader'],
      include: [
        path.resolve(__dirname, "app/style.css"),
        path.resolve(__dirname, "vendor/style.css")
      ]
    }
  ]
}

3. 加载 Sass 文件

需要使用到 sass-loader 的插件，这里先安装：

npm install sass-loader node-sass --save-dev

在 src/style 目录下添加 leo.scss 文件，并添加内容：

// leo.scss

$bg-color: #ee3;
.box{
    background-color: $bg-color;
}

然后在 src/index.js 中引入 leo.scss 文件：

// src/index.js
import './style/leo.scss';

再 npx webpack 重新打包，并打开 dist/index.html 可以看到背景颜色已经添加上去：

4. 添加快捷打包命令

像 npx webpack 这个命令我们需要经常使用，对于这种命令，我们可以把它写成命令，方便每次使用。

我们在 package.json 的 scripts 中添加一个命令为 build，以后打包只要执行 npm run build 即可：

"scripts": {
  "build": "npx webpack -c webpack.config.js"
},

这里的 -c webpack.config.js 中，-c 后面跟着的是 webpack 配置文件的文件名，默认可以不写。

四、 webpack 开启 SourceMap 和添加 CSS3 前缀

添加 SourceMap 是为了方便打包之后，我们在项目中调试样式，定位到样式在源文件的位置。

1. 开启 SourceMap

在 css-loader 和 sass-loader 都可以通过设置 options 选项启用 sourceMap。

// webpack.config.js

rules: [
  {
    test: /\.(sc|c|sa)ss$/,
    use: [
      "style-loader", 
      {
        loader:"css-loader",
        options:{ sourceMap: true }
      },
      {
        loader:"sass-loader",
        options:{ sourceMap: true }
      },
    ]
  }
]

再重新打包，看下 index.html 的样式，样式已经定位到源文件上了：

这样我们在开发过程中，调试样式就方便很多了。

2. 为样式添加 CSS3 前缀

这里我们用到 PostCSS 这个 loader，它是一个 CSS 预处理工具，可以为 CSS3 的属性添加前缀 技术沙龙 教程文章 热点综合