webpack4 系列教程(十四)：Clean Plugin and Watch Mode

TalkingData 发布于2019-08-23 12:27 / 2346人阅读

摘要：作者按因为教程所示图片使用的是仓库图片，网速过慢的朋友请移步系列教程十四原文地址。需要注意的是应该把放在配置项的最后一个，因为配置是倒序的最后配置的最先执行。以保证每次正式打包前，先清空原来遗留的打包文件。

作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址。更欢迎来我的小站看更多原创内容：godbmw.com，进行“姿势”交流 ♪(^∇^*)

0. 课程介绍和资料

>>>本节课源码

>>>所有课程源码

本节课的代码目录如下：

本节课用的 plugin 和 loader 的配置文件package.json如下：

{
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.1"
  }
}

1. 什么是Clean Plugin和Watch Mode？

在实际开发中，由于需求变化，会经常改动代码，然后用 webpack 进行打包发布。由于改动过多，我们/dist/目录中会有很多版本的代码堆积在一起，乱七八糟。

为了让打包目录更简洁，这时候需要Clean Plugin，在每次打包前，自动清理/dist/目录下的文件。

除此之外，借助 webpack 命令本身的命令参数，可以开启Watch Mode：监察你的所有文件,任一文件有所变动,它就会立刻重新自动打包。

2. 编写入口文件和 js 脚本

入口文件app.js代码：

console.log("This is entry js");

// ES6
import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));

// CommonJs
var minus = require("./vendor/minus");
console.log("minus(1, 2) = ", minus(1, 2));

// AMD
require(["./vendor/multi"], function(multi) {
  console.log("multi(1, 2) = ", multi(1, 2));
});

vendor/sum.js:

export default function(a, b) {
  return a + b;
}

vendor/multi.js:

define(function(require, factory) {
  "use strict";
  return function(a, b) {
    return a * b;
  };
});

vendor/minus.js:

module.exports = function(a, b) {
  return a - b;
};

3. 编写 webpack 配置文件

CleanWebpackPlugin参数传入数组，其中每个元素是每次需要清空的文件目录。

需要注意的是：应该把CleanWebpackPlugin放在plugin配置项的最后一个，因为 webpack 配置是倒序的（最后配置的最先执行）。以保证每次正式打包前，先清空原来遗留的打包文件。

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const path = require("path");

module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // js引用路径或者CDN地址
    path: path.resolve(__dirname, "dist"), // 打包文件的输出目录
    filename: "[name]-[hash:5].bundle.js",
    chunkFilename: "[name]-[hash:5].chunk.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      chunks: ["app"]
    }),
    new CleanWebpackPlugin(["dist"])
  ]
};

执行webpack打包，在控制台会首先输出一段关于相关文件夹已经清空的的提示，如下图所示：

4. 开启Watch Mode

直接在webpack命令后加上--watch参数即可：webpack --watch。

控制台会提示用户“开启 watch”。我改动了一次文件，改动被 webpack 侦听到，就会自动重新打包。如下图所示：

如果想看到详细的打包过程，可以使用：webpack -w --progress --display-reasons --color。控制台就会以花花绿绿的形式展示出打包过程，看起来比较酷炫：

云服务器 GPU云服务器 webpack4教程 linux系列教程云服务器建站教程系列 webpack4

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98556.html

webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4 系列教程: 前言

摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

DevWiki 2019-08-23 10:25 评论0 收藏0
webpack4系列教程（三）：自动生成项目中的HTML文件

摘要：自动生成项目中的文件在前文中我们为了演示打包好的，在根目录下创建了一个，并引入。至此，我们已经成功实现自动生成项目中的文件了。执行，在命令行中可见文件夹已被删除了。 1. webpack中的CommonJS和ES Mudule 规范 1.1 CommonJs规范 CommonJs规范的出发点：JS没有模块系统、标准库较少、缺乏包管理工具；为了让JS可以在任何地方运行，以达到Java、P...

kgbook 2019-08-23 14:41 评论0 收藏0
从基础到实战手摸手带你掌握新版Webpack4.0详解一起读文档

摘要：构建构建就是把源代码转换成发布到线上的可执行代码，包括如下内容。自动刷新监听本地源代码的变化，自动重新构建刷新浏览器。自动发布更新完代码后，自动构建出线上发布代码并传输给发布系统。将文件放入到项目中，在中新建一个放字体图标的文件夹。项目地址 github.com/wudiufo/Web… 知识点概览： Loader，HMR ,Create React App, Caching, Plug...

王军 2019-05-23 17:31 评论0 收藏0
webpack4 系列教程(十五)：开发模式与webpack-dev-server

摘要：作者按因为教程所示图片使用的是仓库图片，网速过慢的朋友请移步系列教程十五开发模式与原文地址。而开发模式就是指定为。在非开发模式下，需要关闭此选项，以减小打包体积。在单页应用中，任何响应直接被替代为。作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十五)：开发模式与 webpack-dev-server》原文地址。更欢迎来我的...

zengdongbao 2019-08-23 12:27 评论0 收藏0