好家伙,到了打包发布这一步了

1.配置打包命令:

在package.json 文件的 scripts 节点下,新增 build 命令如下:

"scripts": {

"dev": "webpack serve", // 开发环境中,运行 dev 命令

"build": "webpack --mode production" //项目发布时,运行 build 命令

}

(出现了!!,npm run build)

--model是一个参数项,用来指定webpack的运行模式。production 代表生产环境,

进行代码压缩和性能优化。(开发版本打包快,发布版本包小)

注意:通过--model指定的参数项(其优先级更高),会覆盖webpack.config.js 中的 model 选项。

2.优化图片和js文件的存放路径

在webpack.config.js文件中进行添加配置

output:{

//存放的目录

    path: path.join(__dirname, 'dist'),

//生成的文件名

    filename: 'js/bundle.js'
},

把JavaScript文件统一生成到js目录中
在webpack.config.js 配置文件的 output节点中,进行如下的配置:

output:{

    path:path.join(_dirname, 'dist'),

    // 明确告诉 webpack 把生成的 bundle.js 文件存放到 dist 目录下的 js 子目录中
filename: 'js/bundle.js'. }

现在打包后的文件目录更加规范了,js文件在一个文件夹,图片在一个文件夹,

但重复的打包,会让dist文件夹中的文件变得非常乱,所以我们又需要一个插件来帮我们每次在打包前清除一下dist文件夹中的文件

(所以说又是插件的插件)

3.安装并配置 clean-webpack-plugin插件

为了在每次打包发布时自动清理掉dist目录中的旧文件,可以安装并配置 clean-webpack-plugin插件

// 1.安装清理 dist 目录的 webpack 插件
npm install clean-webpack-plugin@3.0.0-D // 2.按需导入插件、得到插件的构造函数之后,创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin =new CleanwWebpackPlugin() // 3.把创建的 cleanPlugin 插件实例对象,挂载到 plugins 节点中
plugins: [htmlPlugin, cleanPlugin], // 挂载插件

关于配置,看他的名字叫做“ clean-webpack-plugin”那么他一定是webpack的插件,

去到npm的官网上可以看到,其具体的安装方法和配置方法

如下:

网站地址:clean-webpack-plugin - npm (npmjs.com)  //百度直接搜索npm

关于安装:

npm install --save-dev clean-webpack-plugin

去到webpack.config.js文件进行配置:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//大写字母开头,构造方法
const webpackConfig = {
plugins: [ new CleanWebpackPlugin(),
],
};

至此,整个打包流程基本走完

That's all

第五十七篇:webpack打包发布的更多相关文章

  1. webpack打包发布项目

    1.打包 :npm run build 2.发布: 1)使用静态服务器工具包 npm install -g serve serve dist 访问:http://www.localhost.5000 ...

  2. 第二篇 HTML5打包发布IOS APP之苹果开发者账号申请流程

    打包技术转移到了公众号

  3. 第五十七篇、AVAssetReader和AVAssetWrite 对视频进行编码

    AV Foundation提供了直接处理媒体样本的低级功能,其中需要使用的两个重要的类,AVAssetReader和AVAssetWrite,AVAssetReader用于从AVAsset资源读取媒体 ...

  4. WCF技术剖析之二十七: 如何将一个服务发布成WSDL[编程篇]

    原文:WCF技术剖析之二十七: 如何将一个服务发布成WSDL[编程篇] 对于WCF服务端元数据架构体系来说,通过MetadataExporter将服务的终结点导出成MetadataSet(参考< ...

  5. Webpack 打包优化之速度篇

    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...

  6. Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  7. [转] Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  8. 第五十篇: webpack中的loader(一) --css-loader

    好家伙, 1.webpack配置中devServer节点的常用配置项 devServer:{ //首次打包完成后,自动打开浏览器 open:ture, //在http协议中,如果端口号是80,则可以被 ...

  9. Webpack打包构建太慢了?试试几个方法

    Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...

随机推荐

  1. redis如何实现数据同步

    redis如何实现数据同步 两种,1全同步,2部分同步 全备份: 在slave启动时会向master发送sync消息,master收到slave这条消息之后,将启动后台备份进程,备份完成之后,将备份数 ...

  2. JS:构造函数

    定义:在JavaScript中,用new关键字来调用的函数,称为构造函数,构造函数首字母一般大写. 理解: 构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 创建对象, ...

  3. SAP FPM 相关包 APB_FPM_CORE

    related interface: APB_FPM_COREAPB_FPM_CORE_4_EXT_SCAPB_FPM_CORE_INTERNALAPB_FPM_CORE_RESTRICTED

  4. Spring框架系列(6) - Spring IOC实现原理详解之IOC体系结构设计

    在对IoC有了初步的认知后,我们开始对IOC的实现原理进行深入理解.本文将帮助你站在设计者的角度去看IOC最顶层的结构设计.@pdai Spring框架系列(6) - Spring IOC实现原理详解 ...

  5. centos系统和Ubuntu系统命令区别以及常见操作

    目录 一.前言 二.系统环境 三.命令区别 3.1 使用习惯和命令区别 3.2 服务管理的区别 3.3 软件包信息区别 四.Ubuntu系统常见操作 4.1 Ubuntu系统apt和apt-get的区 ...

  6. 我看谁还说程序员不会P图?拜托~4行python代码就够~

    我们平时使用一些图像处理软件时,经常会看到其对图像的亮度.对比度.色度或者锐度进行调整.你是不是觉得这种技术的底层实现很高大上? 其实最基础的实现原理,用 Python 实现只需要几行代码,学会后你也 ...

  7. npm uninstall和rm直接删除的区别

    结论: 1. npm uninstall会备份包本身依赖的node_modules,rm -f会删除整个目录 2. npm uninstall不会删除被依赖的包.即使显式要删除这个包,但它被依赖不会删 ...

  8. 《深入理解java虚拟机》读书笔记-第二章Java内存区域和内存溢出异常

    java1.7和java8的jvm存在差异,本文先按照<深入理解java虚拟机>的讲解内容总结,并将java8的改变作为附录放在文末 一丶运行时数据区域 ​ 图:java虚拟机运行时数据区 ...

  9. 集合-新特性foreach循环遍历集合或项目

    1.增强for循环对集合的遍历 点击查看代码 @Test //集合遍历 public void test3(){ Collection coll = new ArrayList(); coll.add ...

  10. vivo官网APP全机型UI适配方案

    vivo 互联网客户端团队- Xu Jie 日益新增的机型,给开发人员带来了很多的适配工作.代码能不能统一.apk能不能统一.物料如何选取.样式怎么展示等等都是困扰开发人员的问题,本方案就是介绍不同机 ...