(7/24) 插件配置之html文件的打包发布
从前面几节到现在,其实我们的项目结构是有问题的,因为我们直接把index.html文件放到了dist文件夹目录下。这肯定是不正确的,应该放到我们src目录下,然后打包到dist目录下,前面为了学习,才把index.html放到了dist目录下。
此节我们就来完成把开发环境中的html文件打包到我们的生产路径下。
1.打包HTML文件
在开始下面内容之前,我们先改造一下之前的项目结构,先把dist中的index.html文件剪切到src目录中,并去掉我们引入的js代码(webpack会自动为我们引入js),src才是我们真正工作的目录文件结构。然后删除之前手动创建的dist目录。
看看目前的项目结构目录:
1.1 安装html-webpack-plugin插件
npm install --save-dev html-webpack-plugin
1.2 引入html-webpack-plugin插件
在webpack.config.js文件中,引入html-webpack-plugin插件:
const htmlPlugin= require('html-webpack-plugin')
1.3 插件配置
在webpack.config.js里的plugins里进行插件配置,配置代码如下:
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
注释:
minify:是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
hash:为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
template:是要打包的html模版路径和文件名称。
1.4 打包
上边的都配置完成后,我们就可以在终端中使用webpack命令,进行打包。结果index.html文件被打包到我们的dist目录下了,并且自动引入了入口的js文件。
1.5 启动服务
在终端中执行npm run server命令,此时我们可以看到服务能正常启动,而不是像上一节中会出现冲突。我们可以通过 http://localhost:1818/ 进行访问。
访问效果如下,其效果与之前一致。为此我们成功完成了html文件的打包发布工作。
总结:
html文件的打包可以有效的区分开发目录和生产目录,在webpack的配置中也要搞清楚哪些配置用于生产环境,哪些配置用于开发环境,避免两种环境的配置冲突。
(7/24) 插件配置之html文件的打包发布的更多相关文章
- webpack快速入门——插件配置:HTML文件的发布
1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...
- (11/24) css进阶:Less文件的打包和分离
写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性, ...
- (6/24) 插件配置:轻松配置JS文件压缩
实际开发中,在项目上线之前,我们编写的js代码是需要进行压缩的,我们可以采取压缩软件或者在线进行压缩,这不是我们的重点,在webpack中实现JS代码的压缩才是本节的核心. 通过webpack中可实现 ...
- (12/24) css进阶:sass文件的打包和分离
1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包.node-sass和sass-loader,(也可以使用cnpm安装) 因为sass-loader依赖于node-sass ...
- webpack快速入门——CSS进阶,Less文件的打包和分离
1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...
- webpack快速入门——CSS进阶:SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
- maven常用插件配置详解
常用插件配置详解Java代码 <!-- 全局属性配置 --> <properties> <project.build.name>tools</proje ...
- Vue插件配置和 后台交互
Vue插件配置和 后台交互 一.全局配置静态文件(csss, js..) 1.1 全局配置css文件 创建css文件 在main.js配置css文件 // 配置全局css样式 // 方式一 impor ...
- Mybatis-Plus插件配置
yml配置 1 # Mybatis-Plus 2 mybatis-plus: 3 # 配置mapper的扫描,找到所有的mapper.xml映射文件 4 mapper-locations: com.x ...
随机推荐
- docker hub切换国内镜像
官方docker hub访问非常的慢,安装之后最好先切换国内镜像: 执行: curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh ...
- [cf1025D][区间dp]
http://codeforces.com/contest/1025/problem/D D. Recovering BST time limit per test 1 second memory l ...
- JVM垃圾回收机制之对象回收算法
前言 在前面的文章中,介绍了JVM内存模型分为:堆区.虚拟机栈.方法区.本地方法区和程序计数器,其中堆区是JVM中最大的一块内存区域,在Java中的所有对象实例都保存在此区域,它能被所有线程共享. 在 ...
- JWT学习小结
JWT全称JSON-Web-Tokens,是一套应对Http其无状态且明文传递请求的特性的规范,保证请求的安全性.我们一般用它来在服务端和客户端之间传递用户的身份信息,实现状态保持. 1,相较于常见的 ...
- WMware Vsphere取消某虚机的漂移
由于一些业务特性,有一些虚机不应该完全受集群DSR控制.下面记录一下如何更改某一虚机的漂移属性. 1.环境 VMware Vsphere web client 6.5 2.点击需要配置虚机所在的集群, ...
- CentOS6/7快捷使用gcc5
Centos6/7自带的gcc为4.x版本,可通过devtoolset工具集安装gcc5.x版本 1. 添加yum源 1)CentOS6 [hhorak-devtoolset--rebuild-boo ...
- JavaScript DOM&BOM
1.DOM含义 D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象O:Object 对象 JavaScript语言里对象可以分为三种类型: (1)用户定义的对象(user-de ...
- 1-Two Sum @LeetCode
1-Two Sum 题目 思路 题目中得到的信息有: 都是整数,并且可正可负,也可一个值包含多个: 只有一个正确的结果. 方法一: 最直接的思路就是两重循环遍历,时间复杂度是O(n^2),这样肯定不行 ...
- [随笔][Java][修改pom仓库库为阿里云]
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- [转]微软商店 打开就显示无法加载该页面 代码0x80131500?
在某博客看到的方法,供参考,可以尝试一下,我的也是这么解决的 1.打开“运行”输入 inetcpl.cpl (“WINDOWS”+“R”键,输入 inetcpl.cpl亦可) 2.点开高级往下拉,勾上 ...