Webpack 4 学习11(用clean-webpack-plugin来清除文件)

当我们修改带hash的文件并进行打包时,每打包一次就会生成一个新的文件,而旧的文件并没有删除。为了解决这种情况,我们可以使用clean-webpack-plugin在打包之前将文件先清除,之后再打包出最新的文件

  • 下载插件依赖

    npm install --save-dev clean-webpack-plugin
  • 配置webpack.config.js
    • 头部引入插件

      const CleanWebpackPlugin = require('clean-webpack-plugin');
    • plugins模块引入
       new CleanWebpackPlugin(['build'])
  • 运行打包命令

    webpack --mode development

原文地址:https://www.cnblogs.com/hunterxing/p/10425303.html

时间: 2024-10-10 07:12:01

Webpack 4 学习11(用clean-webpack-plugin来清除文件)的相关文章

webpack入门学习

一.认识webpack webpack是一款模块打包加载工具.它能够将各种资源.JS.CSS.图片等作为模块打包加载.本人也是近期因工作需要才开始接触webpack,在下文中有误的地方还希望各位能够指出,本人也会积极改正. 二.安装webpack 这里安装webpack的前提是已经安装的node.js和npm.下面进行webpack的全局安装: $ npm webpack install -g 三.相关配置 每个使用webpack的项目必须有一个webpack.config.js文件.先上代码.

webpack学习(五)—webpack+react+es6

如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)- webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都会用到这个组合:webpack+react+es6 还是以一个项目举例,项目中的package.json是生成的,"devDependencies"都是自己安装加入,如果拷贝网上的资料,可以npm install直接生成.而为了一探react的具体开发流程,还是自己一个个安装比较好. 项目

Webpack 入门学习

1.什么是Webpack? Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用. 2.WebPack和Grunt以及Gulp相比有什么特性? 其实WebPack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过WebPack的优点使得WebPack可以替代G

react+webpack基础学习配置

最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目,过程还算顺利.总结一下步骤: 1.创建一个项目文件夹Blog,cd进入文件夹目录,输入 npm init -y 生成package.json文件: 2.工程目录创建,如下如是我的工程目录 public是webpack打包后生成的文件夹,src是逻辑组件文件夹,assets是静态文件 webpack

Webpack 4 学习09(打包生成html)

所需插件 html-webpack-plugin 本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置) **了解html-webpack-plugin** HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件. 安装依赖 npm install html-webpack-plugin --save-dev 配置webpack.config.js文件 在头部定义常量,引入插件 const H

Webpack 4 学习04(配置webpack-dev-server)

前提: Webpack 4 学习01(基础配置) ? Webpack 4 学习02(通过配置文件打包) 一.了解 webpack-dev-server webpack-dev-server用来配置本地服务器 为 webpack 打包生成的文件提供web服务 自动刷新和热替换(HMR) 二.安装webpack-dev-server npm install --save-dev webpack-dev-server 三. 配置webpack.config.js文件 devServer:{ conte

Webpack 4 学习02(使用配置文件进行打包)

上一讲中我们打包没有用到webpack.config.js配置文件,webpack4把自己定位为一个零配置的工具.这一讲学习配置文件使用,更好地学习webpack. 上一讲 Webpack 4 学习01(基础配置) 根目录下新建一个webpack.config.js文件 (记载配置信息) 配置文件 const path = require('path'); module.exports = { entry:'./public/index.js', output:{ path:path.resol

Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思路分享出来了,传送门在这里. 因为那份配置直到现在还有人在关注,同时最近公司帮助项目升级了 Webpack 4,趁机也把之前的配置也升级了一下,而且博客荒废了这么久,都快 9102 年了,不能连年均一篇博文都不到,所以有了下面的分享. 下面的配置主要是给在多页面下使用 Webpack 的同学在升级

The way of Webpack learning (I.) -- Configure Webpack from zero(从零开始配置webpack)

学习之路基于webpack3.10.0,webpack4.0之后更新. 一:开始前的配置 1.初始化项目,其实就是新建一个package.json文件,后面的命令依赖里面的配置项. npm init 2.修改npm script定义的任务,新增一项. "scripts": { "start": "webpack --config webpack.config.js" } 3.安装webpack npm i -D [email protected]