webpack打包进内联html
用到一个新插件:html-webpack-inline-source-plugin(依赖于html-webpack-plugin)
1.安装
npm i -D html-webpack-inline-source-plugin html-webpack-plugin
2.编写webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.resolve('./dist'),
filename: 'bundle.js'
},
plugins: [
new htmlWebpackPlugin({
template: './index.html',
filename: 'index-[hash].html',
inject: 'head',
inlineSource: '.(js|css)'
}),
new HtmlWebpackInlineSourcePlugin()
]
}
需要在html-webpack-plugin里添加 inlineSource: '.(js|css)'
webpack打包进内联html的更多相关文章
- Webpack - 把json文件打包进js文件
把html文件打包进index.js 1 新建文件 typings.d.ts declare module "*.html" { const content: st ...
- HTML5进阶段内联标签汇总(小篇)
内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 ...
- Less与TypeScript的简单理解与应用,并使用WebPack打包静态页面
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...
- webpack打包和gulp打包工具详细教程
30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...
- (webpack系列二)webpack打包优化探索
虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条 ...
- webpack打包经验——处理打包文件体积过大的问题
前言 最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 Ex ...
- webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)
在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- webpack打包优化点
目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking ...
随机推荐
- codeforces474D
Flowers CodeForces - 474D 话说某个幸运的小伙伴X拿到了kevin女神送的蛋糕,然而他的吃法非常奇特,他独创了两种吃蛋糕的办法:一.一次吃一整个蛋糕:二.一次吃k个蛋糕. 那么 ...
- CH0802 占卜DIY
模拟 没怎么看题..直接deque模拟水过了.. 但是后来回过头看了下题意..如果再次拿到正面朝上的牌,应该是废操作..可能是数据太水了... #include <bits/stdc++.h&g ...
- 【BZOJ4944】【NOI2017】泳池 概率DP 常系数线性递推 特征多项式 多项式取模
题目大意 有一个\(1001\times n\)的的网格,每个格子有\(q\)的概率是安全的,\(1-q\)的概率是危险的. 定义一个矩形是合法的当且仅当: 这个矩形中每个格子都是安全的 必须紧贴网格 ...
- bzoj 1103 : [POI2007]大都市meg (树链剖分+线段树)
Description 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了.不过,她经常回忆起以前在乡间漫步的情景.昔日,乡下有依次编号为1..n ...
- ZOJ 3846 GCD Reduce//水啊水啊水啊水
GCD Reduce Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge You are given a sequ ...
- 【CodeForces 717C】Potions Homework
BUPT 2017 summer training (for 16) #1G 题意 每个人有一个懒惰值,每个任务有个难度,一开始每个人的任务和懒惰值都为\(a_i\),完成任务时间是懒惰值乘以难度,现 ...
- 使用Putty执行Rsync命令
背景介绍:公司的文件服务器有多个,一个Master服务器,10个左右的Slave服务器. 当Master服务器中的文件更新之后,Slave服务器中的文件也必须做相对应的同步操作. 公司目前使用的Rsy ...
- IntelliJ IDEA快捷键总结
原文: IntelliJ IDEA快捷键 下面只列出Windows系统下的快捷键,Mac下的快捷键参考上面的链接. Remember these Shortcuts 功能 快捷键 Smart code ...
- 【BZOJ5291】[BJOI2018]链上二次求和(线段树)
[BZOJ5291][BJOI2018]链上二次求和(线段树) 题面 BZOJ 洛谷 题解 考虑一次询问\([l,r]\)的答案.其中\(S\)表示前缀和 \(\displaystyle \sum_{ ...
- Codeforces | CF1037D 【Valid BFS?】
题目大意:给定一个\(n(1\leq n\leq 2\cdot10^5)\)个节点的树的\(n-1\)条边和这棵树的一个\(BFS\)序\(a_1,a_2,\dots,a_n\),判断这个\(BFS\ ...