webpack extract-text-webpack-plugin
const path = require("path");
const extracttextplugin = require("extract-text-webpack-plugin");
module.exports = {
entry:"./main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"./dist"),
},
module:{
rules:[
{
test: /\.css$/,
loader:extracttextplugin.extract({
use:["css-loader"],
})
}
]
},
plugins:[
new extracttextplugin({
filename:`[name]_[contenthash:8].css`,
})
]
}yarn add extract-text-webpack-plugin --devyanr run buildindex.html 修改
<html>
<link href="dist/main_0ca7af0d.css" rel="stylesheet">
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>https://www.npmjs.com/package/extract-text-webpack-plugin
https://github.com/webpack-contrib/extract-text-webpack-pluginwebpack extract-text-webpack-plugin的更多相关文章
- webpack之loader和plugin简介
webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...
- 深入浅出的webpack构建工具---webpack基本配置(一)
深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- webpack系列--浅析webpack的原理
一.前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的.如果摒弃这些开发框架 ...
- Webpack入门——使用Webpack打包Angular项目的一个例子
2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...
- [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge
The development and production modes in webpack optimize the output in different ways. In developmen ...
- 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法
现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...
- webpack配置之webpack.config.js文件配置
webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...
- webpack中loader和plugin的概念理解
对于 loader ,它就是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将 A.scss 或 A.less 转变成 B.css,单纯的文件转换过程: 对于 plugin,它就是一个扩 ...
- webpack config to use plugin and webpack-dev-server
Demo3操作手册 本Demo演示如何配合各种plugin进行偏复杂的使用 准备环境 初始化环境, cd到demo1目录之后, 执行如下命令: npm init -y npm install webp ...
随机推荐
- vim 的寄存器
If you've been following my series on Vim, it should be clear now that Vim has a pretty clear philos ...
- layui弹窗宽度固定高度自适应界面
//默认上下15px的边距高度,可根据需要修改function layuiDialogFitScreen(){ var layui_title_height=$(window.parent.docum ...
- 解决spring boot在RabbitMQ堆积消息情况下无法启动问题
最近遇到一个问题,服务站点上线之前,先去新建需要的rabbitmq并绑定关系,此时 如果发送消息方运行, 那边会造成新建的q消息部分堆积得不到及时消费 那么问题来了? 在消息堆积情况下,服务站点无法启 ...
- Hadoop出现 Wrong FS: hdfs://......错误的解决方法
今天在hadoop项目中出现以下报错:java.lang.IllegalArgumentException: Wrong FS: hdfs://......,expected: file:///... ...
- 伪基站，卒于5G——本质上是基于网络和UE辅助的伪基站检测，就是将相邻基站的CI、信号强度等信息通过测量报告上报给网络，网络结合网络拓扑、配置信息等相关数据，对所有数据进行综合分析，确认在某个区域中是否存在伪基站
伪基站,卒于5G from:https://www.huxiu.com/article/251252.html?h_s=h8 2018-07-05 21:58收藏27评论6社交通讯 本文来自微 ...
- jquery基础 笔记三
一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...
- 十八、dbms_repair(用于检测,修复在表和索引上的损坏数据块)
1.概述 作用:用于检测,修复在表和索引上的损坏数据块. 2.包的组成 1).admin_tables语法:dbms_repair.admin_tables(table_name in varchar ...
- PostgreSQL基于时间点故障恢复PITR（ point-in-time recovery ）
PostgreSQL在使用过程中经常会发生一些失误的操作,但往往是可以弥补的.但是如果真遇到了无法挽回的误操作,只能寄希望于有备份了. 接下来的故障恢复也是基于有备份的情况,没有备份的情况,目前还没有 ...
- jsp页面图片显示不出来
jsp页面就是MyJsp.jsp <body> This is my JSP page. <br> <img src="img/top.jpg"> ...
- jQuery 选项卡 CleverTabs
CleverTabs是一款jQuery插件,所需jQuery版本:1.6.1,jQuery UI样式版本:1.8.13:其功能为创建jQuery UI风格的Tab用于显示iframe. 本示例中符加了 ...