web 配置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

},

hash:true,

template:'./src/index.html'

})

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

上图：

前端必学内容：webpack(模块打包器)

webpack3 学习内容，点击即可到达

如果我的内容对你有帮助，欢迎打赏

webpack快速入门——配置文件：入口和出口，多入口、多出口配置

1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

webpack快速入门——CSS文件打包

1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

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

1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

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- ...

webpack快速入门——实战技巧：webpack模块化配置

首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...

webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

webpack快速入门——CSS进阶：自动处理CSS3前缀

为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

webpack快速入门——如何安装webpack及注意事项

1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

随机推荐

第十章：Intent详解

[正文] Intent组件虽然不是四大组件,但却是连接四大组件的桥梁,学习好这个知识,也非常的重要. 一.什么是Intent 1.Intent的概念: Android中提供了Intent机制来协助应用 ...

HttpClient连接池抛出大量ConnectionPoolTimeoutException: Timeout waiting for connection异常排查

转自: http://blog.csdn.net/shootyou/article/details/6615051 今天解决了一个HttpClient的异常,汗啊,一个HttpClient使用稍有不慎 ...

Extjs4 操作TreeStore 处理proxyAjax 获取的数据

近期在搞extjs4 TreeStore时有一个需求 就是要处理一下后台传过来的json数据然后再显示,看api也没有找到解决的方法 ,最后看源代码在Ext.data.proxy.Server 看到这 ...

CentOS7卸载KDE桌面(转)

最初安装centos时选择了安装KDE桌面,打开很卡,没有用到,想卸载,可是试了网上的方法什么yum groupremove kde-desktop 都不奏效,于是只能自己找出KDE的包,然后yum卸 ...

小工具：截图&简单图像处理

一.程序运行截图 二.获取屏幕截图的方法 首先知道我们可以通过Screen.PrimaryScreen.Bounds获取到当前整个屏幕,再利用Bitmap和Graphics就可以得到整个屏幕的图片了. ...

SmartSql 入门

入门 安装 Install-Package SmartSql Install-Package SmartSql.Schema // 以及相应ADO.NET驱动 从连接字符串创建SmartSql实例 v ...

配置httpd支持https

1.首先为192.168.108.159创建私有CA #cd /etc/pki/CA # (umask 077;openssl genrsa -out private/cakey.pem 2048) ...

神坑，使用gcc对opencv重编译

工具 cmake-3.9.1 opencv-3.3.0  gcc-6.3.0 前几天为了装eclipse的CDT,把minggw里的make改了,今天突然想学opencv,可是只找到了vc版本,千辛万 ...

《Linux内核设计与实现》第五周读书笔记——第十一章

第五周读书笔记——第十一章 20135301张忻 估算学习时间:共2.5小时 读书:2.0 代码:0 作业:0 博客:0.5 实际学习时间:共3.0小时 读书: ...

有人在群里问mysql如何选择性更新部分条件的问题

有人在群里问这个问题 update xt_kh set zhye=zhye+1,hzyj=hzyj+1 where dlgh='kiss0451' and hzms=1 如果这样写 hzms不等于1的 ...