//CleanWebpackPlugin //用于清理输出目录的插件，可以在每次构建之前喊出指定的输出目录，以确保每次构建都是从一个干净的状态开始的；//1.安装CleanWebpacknpm install clean-webpack-plugin --save-dev//2.在webpack中引入CleanWebpackPlugin插件const {CleanWebpackPlugin} = require('clean-webpack-plugin');//3.在配置对象中的plugins数组中添加CleanWebpackPlugin的实例module.exports = {plugins：[new CleanWebpackPlugin({//默认情况下，CLeanWebpackPlugin将清理webpack的输出目录，指定要清理的目录或文件使用传递选项来配置插件cleanOnceBeforeBuildPatterns: ['dist'], // 清理输出目录cleanAfterEveryBuildPatterns: ['temp/*.js'], // 清理每次构建后的临时文件，temp目录下所有以.js为后缀的文件cleanStaleWebpackAssets: true // 清理未使用的 webpack 资产，清理上一次构件中生成的、但在当前构件中不适用webpack})]}
3.1安装插件，每次打包都需要手动创建一个html文件，然后引入打包好的文件，这样比较麻烦就要借助到插件了
1、
在终端输入npmhtml-- --save-dev //作为开发依赖
用于将生成的html文件并自动将打包好的脚本文件添加到html中 。

文章插图
2、
const HtmlWebpackPlugin = require('html-webpack-plugin');//导入html-webpack-plugin插件module.exports = {//CommonJS语法 是一个模块化的JavaScript规范plugins:[new HtmlWebpackPlugin ({//配置了一个HtmlWebpackPlugin作为插件template:'./src/index.html',//指定模板HTML的文件路径filename:'index.html' ,//生成打包好的文件下的（dist）的HTML文件的文件名称名 //构建过程中生成一个html文件，该文件以指定的模块文件为基础，将构建生成的JavaScript文件自动注入到html文件中，并将文件生成的html文件输出，简化了手动创建})]}
3、如图
使用npm run build 进行打包文件就可以看到效果了
4.1每次内容发生改变时都需要手动输入命令进行打包所以下边安装一下实时编译的功能也叫热模块替换
npm-dev- --save-dev//用来安装开发服务器，是一个基于的开发服务器，提供实施重载和热模块替换功能//.的开发服务器是一个用于开发环境的轻量级服务器，它可以在开发过程中提供实时的编译和构造，并支持热模块替换；热模块替换是一种提供的功能，它允许在应用程序运行时，无需刷新整个页面的情况下，替换、添加或删除模块，从而实现实时更新和快速开发调试 。
4.2在.json文件中配置
添加"scripts":{"build":"webpack",//运行普通的webpack打包构建"dev":"webpack-dev-server"// 把文件保存到内存中，而不是写入硬盘；每次内容发生改变时，会自动重新编译并在浏览器中实时刷新}
5.1、安装依赖因为编译得代码都是es6的如果有低版本的会编译错误
5.2在终端
npm@babel/core @babel/-env babel- --save-dev
//用于安装Babel相关的依赖，Babel用于将ES6+的代码转换后兼容的es5代码 。
5.3在根目录中创建一个.的配置文件
{ //预设：babel一系列插件的集合,这个插件可以帮助我们把es6的代码转换成es5 "presets":["@babel/preset-env"] //刚才安装好的预设，进行转换 }
5.4在..js文件中配置
module.exports = {module:{rules:[{test:/\.js$/,//js的正则表达式，并转换为ES5语法loader:'babel-loader',//loader的顺序是从下到上的include:path.join(__dirname,'src'),//处理src的文件下的exclude:/node_modules///排除}]}}

• 上一页
• 1
• 2
• 3
• 4
• 5
• 6
• 下一页

• 长年紧缺药材有哪几种详细介绍
• 农村常见的十种野菜详细介绍
• Linux- struct list_head简介
• java设计模式之 代理模式
• 七色花故事简介 七色花故事简介80字
• 华为公司发展史简介 华为公司发展的总战略
• Intel Parameter-Framework简介
• ETCD原理详细解析
• 春天有哪些花开放详细介绍
• 必须掌握的TCP全家桶系列详细解读：流量控制、三次握手、四次挥手及拥塞控制算法