(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/ 进行访问。

访问效果如下,其效果与之前一致。为此我们成功完成了htnl文件的打包发布工作。

总结:

html文件的打包可以有效的区分开发目录和生产目录,在webpack的配置中也要搞清楚哪些配置用于生产环境,哪些配置用于开发环境,避免两种环境的配置冲突。

原文地址:https://www.cnblogs.com/wfaceboss/p/10109530.html

时间: 2024-10-04 21:12:05

(7/24) 插件配置之html文件的打包发布的相关文章

webpack快速入门——插件配置:HTML文件的发布

1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-webpack-plugin'); 3.引入后进行安装   cnpm i html-webpack-plugin --save-dev 4.在webpack.config.js中进行插件配置 new htmlPlugin({ minify:{ removeAttributeQuotes:true }, h

(11/24) css进阶:Less文件的打包和分离

写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展.Less 可以运行在 Node 或浏览器端.Less知识学习 1.Less文件的打包处理 1.1 在src/index.html文件中新增一个标签,样式采用less编写. <div id="less_part">less</div> 1.

(12/24) css进阶:sass文件的打包和分离

1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包.node-sass和sass-loader,(也可以使用cnpm安装) 因为sass-loader依赖于node-sass,所以需要先安装node-sass 1.1 node-sass npm install --save-dev node-sass 1.2 sass-loader npm install --save-dev sass-loader 注意:在用npm安装时,这个loader很容易安装失败,最好使用cn

通过Vim+少量插件配置一个高效简洁的IDE

最近本人在看<TCP/IP Illustrated Volume2:The Implementation>这本书,自然要下载4.4BSD-Lite的源代码配合书本一起研读.以前学习Vim的时候就知道Vim可以通过插件的功能来配置一个功能强大的自定义IDE,这次有这么好的机会为什么不利用一下呢?于是在阅读源代码的过程中根据需要一步一步配置了一个简单完整的IDE环境,通过这几天的使用真心觉得Vim好用,速度那个快呀.以前总听别人说Vim如何如何好,这次真的让我感受到了并爱上了Vim这个工具.在这里

maven常用插件配置详解

常用插件配置详解Java代码    <!-- 全局属性配置 --> <properties> <project.build.name>tools</project.build.name> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> project.build.name:  用来定义war包名称  proje

Gvim各种插件配置(windows环境下)

1.Vundle插件:https://github.com/gmarik/Vundle.vim 用于管理Vim插件,安装此插件需要系统中已安装git,参考链接:Git for Windows安装和基本设置 在Vim/vimfiles路径下新建文件夹bundle,然后在此文件夹下克隆github上的vundel项目: 完成后会在bundle文件夹下看到Vundle.vim文件夹下的内容,开始配置vundle: 在.vimrc文件中添加如下代码: 1 filetype off 2 3 "Vundle

eclipse git插件配置

一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) EGit插件地址:http://download.eclipse.org/egit/updates OK,随后连续下一步默认安装就可以,安装后进行重启Eclipse 二.在Eclipse中配置EGit 准备工作:需要在https://github.com 上注册账号 Preferences > Tea

jetty热部署,持久化session,jetty-maven插件配置

持久化session 背景 使用maven管理项目,使用jetty插件启动项目,虽然jetty是热部署的,但是没有配置的jetty并不算真正的热部署.因为在没有配置前每次热部署都会把session丢了.导致测试期间的数据丢失,重来一遍很麻烦. 本人使用的是jetty-maven-plugin,关于这个插件的一些基本配置就不说了,网上很多. 配置代码pom <plugin> <groupId>org.mortbay.jetty</groupId> <artifact

Maven常用插件配置和使用

主要介绍Maven的几个常见第三方插件(cobertura.findbugs.source.assembly.插件开发)配置和使用,接Maven介绍 maven本质上是一个插件框架,它的所有工作都交给插件来做,每个插件可以有多个goal.除了自带的插件之外还有很多比较成熟的第三方插件,我们也很容易上手进行简单的插件开发,下面一一介绍 1 自带插件maven自带的核心插件为Build plugins和Reporting plugins.mvn compile编译源码实际上就利用到了maven-co