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
    },
    hash:true,
    template:‘./src/index.html‘
 })

5.在终端中输入webpack,进行打包,你会看到index.html文件已经被我们打包到dist文件目录下了,并且自动引入了js文件

上图:

时间: 2024-11-08 09:23:32

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

webpack快速入门和实战

webpack是什么 Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 这张图基本上解释了webpack是用来干嘛的,将一些相互依赖的模块(文件),打包成一个或多个js文件,减少http请求次数,提升性能.这些相互依赖的模块可以是图片.字体.coffee文件.样式文件.less文件等. 1. 安装 先安装 install node.js node.js包含一个包管理器:npm 基本命令 webpack // 最基本的启动web

Webpack快速入门(一)

本文可供Webpack新手与Webpack老手复习之参考.注:本文基于当前最新的webpack V4.29.5:本文示例操作步骤在Mac下实现. 前提 (1)具有一定JavaScript基础(2)了解npm基本使用 什么是Webpack? 有文(参考(2))说"WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用". 而官方

Webpack快速入门

什么是Webpack 顾名思义它是一个前端打包工具,通过给定的入口文件自动梳理所有依赖资源(包括css.图片.js等),并按照配置的规则进行一系列处理(转es5.压缩等),打包生成适合现代生产环境要求的文件.同时也借此竖起技术壁垒,防止后端改代码[滑稽]. npm基本操作 现今前端体系构建在node之上,npm是node的包管理器.webpack.babel等只是工具包,都通过npm安装. 初始化新项目 npm init 全局安装依赖包PACKAGE,不属于具体哪个项目 npm install

webpack快速入门——配置JS压缩,打包

1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugins:[ new uglify() ] 3.在终端输入webpack,你会发现JS代码已经被压缩了,如果你用的是VSCode,可以按住Alt+Z代码自动换行,查看效果 4.上图

快速入门vue-cli配置

作为一名使用了一段时间Vue.js的新手,相信和不少初入Vue的朋友一样,都对Vue-cli的配置一知半解.后来通过对webpack的学习,也算是对脚手架的配置有了一定的了解,所以也想把这段时间自己的成果分享给大家,希望能和大家一起进步. 有两点要说明的: 阅读本文需要了解一点点webpack的知识,至少要entry,output,module,plugins都是做什么,以及一些常用的loader和plugins: 本文使用的是最新版的vue,配置可能会和大家的有所不同,不过差距不会太大,不影响

Webpack快速入门(二)

在前文中,已经成功使用Webpack打包并生成了一个目标.js文件.但是,在终端中进行复杂的操作,显然是不太方便且容易出错的.接下来,让我们学习Webpack的另一种更常见的使用方法,即通过配置文件来使用Webpack.这也是webpack的重点使用方式. 首先,提醒注意的是,我们要学习的这个配置文件其实也是一个简单的JavaScript模块文件,我们可以把所有的与打包相关的信息放在里面.通过一个js文件来实现配置功能的一个重要好处是,你可以在其中加入灵活多样的注释--在.json配置文件中是非

webpack快速入门——webpack3.X 快速上手一个Demo

1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件. 2.在dist下建立一个index.html文件,写入以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

Webpack快速入门(三)

作为前两篇的补充,本文想再说明一下npx命令相关的另一种实现. NPM Scripts 在前面的文章中,我们提到使用如下命令方式: npx webpack ...... 于是,位于"./node_modules/.bin/webpack"便会被执行.这得益于npx这个命令. 其实,还有另外一种方式,更为常用,即借助于npm run命令和package.json配置文件中的"scripts"键. 示例 请看下面的配置文件: { "name": &q

Ansible-Tower快速入门-7.配置实时事件【翻译】

配置实时事件 在tower的菜单中,在接近用户菜单处有一个带有颜色的小点,这个带颜色的小点显示tower的实时事件功能的状态 如果这个小点是绿色的,表示运行正常,如果这个小点是红色或橙色,表示实时事件不工作,在这种情况下,点击这个小点,将弹出实时事件的排错向导,跟从向导的说明来配置实时事件. 如果实时事件不正常工作,在许多页面上将会出现一个刷新按钮,如 ,使用它可以对内容进行刷新. 现在,让我们创建一个新的组织,在该组织内,我们可以创建我们的第一个用户,存储主机的清单,并为那些主机,存储SSH认