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 ...
随机推荐
- CSS3 flexbox 布局 ---- flex 容器属性介绍
flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...
- python----re正则模块详解
今天介绍一下Python中常用的正则表达式处理函数.Python的正则表达式主要有两种方法完成模式匹配:『搜索』和『匹配』 re.match re.match 尝试从字符串的开始全部或者部分匹配某个模 ...
- node.js 高级功能
一.Web 模块 1.http 请求(client.js) var http = require('http'); // 用于请求的选项 var options = { host: 'localhos ...
- 日期T转换
日期转换 在startup.csd ConfigureServices方法里 services.AddMvc().AddJsonOptions(o => { o.SerializerSettin ...
- Tomcat启动特慢之SecureRandom问题解决
tomcat启动日志: 08-Jun-2018 09:23:00.445 WARNING [localhost-startStop-1] org.apache.catalina.util.Sessio ...
- Matplotlib学习---用matplotlib画直方图/密度图(histogram, density plot)
直方图用于展示数据的分布情况,x轴是一个连续变量,y轴是该变量的频次. 下面利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://d ...
- 解决Altera家的ROM仿真数据一直为0
BUG现象 各种配置都正确,但ROM就是不出数据,输出一直为零. 解决方式 对于rom的仿真,要更改生成的rom文件的一个地方,主要是由于相对路径与绝对路径的问题. 所以最简单的解决方法是把mif文件 ...
- 【XSY2332】Randomized Binary Search Tree 概率DP FFT
题目描述 \(\forall 0\leq i<n\),求有多少棵\(n\)个点,权值和优先级完全随机的treap的树高为\(i\). \(n\leq 30000\) 题解 设\(f_{i,j}\ ...
- 普通Splay详解
预备知识: 二叉搜索树(BST) 至于BST,随便看一下就可以, 我们知道二叉搜索树是O(logN)的,那我们为什么要用平衡树呢? 之前我们了解到,BST的插入是小的往左子树走,大的往右子树走,如果凉 ...
- MT【307】周期数列
(2017浙江省数学竞赛) 设数列$\{a_n\}$满足:$|a_{n+1}-2a_n|=2,|a_n|\le2,n\in N^+$证明:如果$a_1$为有理数,则从某项后$\{a_n\}$为周期数列 ...