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 ...
随机推荐
- C++双向循环链表实现
双向循环链表C++实现 1.单链表: 结构图: 2.双向链表: 3.双向循环链表: 对于本程序中,则是给定一个_head 头结点,而不是指针,因为这样更加方便避免一些空判断问题 /* 版权信息:狼 ...
- Wannafly挑战赛14E无效位置
https://www.nowcoder.com/acm/contest/81/E 给一个1-base数组{a},有N次操作,每次操作会使一个位置无效.一个区间的权值定义为这个区间里选出一些数的异或和 ...
- POJ 2891 中国剩余定理的非互质形式
中国剩余定理的非互质形式 任意n个表达式一对对处理,故只需处理两个表达式. x = a(mod m) x = b(mod n) km+a = b (mod n) km = (a-b)(mod n) 利 ...
- iptables疑问总结（一）
1.关于-j 的return说明 1. 从一个CHAIN里可以jump到另一个CHAIN, jump到的那个CHAIN是子CHAIN.2. 从子CHAIN return后,回到触发jump的那条规则, ...
- 验证email是否合法
https://buluo.qq.com/p/detail.html?bid=339910&pid=6675390-1514450689&from=grp_sub_obj 场景1:验证 ...
- webmin 安装
webmin 安装1.下载:wget http://prdownloads.sourceforge.net/webadmin/webmin-1.850-1.noarch.rpm2.安装依赖环境:yum ...
- hdu 5802 Windows 10 (dfs)
Windows 10 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- fegin 调用源码分析
http://techblog.ppdai.com/2018/05/28/20180528/ 这篇文章是相当详细
- 如何将Pcm格式的音频文件转换成Wave格式的文件
最近在做一款变声App,其中就用到了将pcm格式转wave格式,下面贴出源代码,希望带有需求的童鞋有帮助!!!这里是c++语言写的,也可以用java实现.当然java调用native函数要用到jni技 ...
- LINUX系统下的squid服务
一.squid服务实现正向代理 正向代理,是一个位于客户端和原始服务器之间的服务器. 客户端可以通过服务器的缓存数据,得到所需的结果. 示例:在一台可以联网的主机上,安装squid软件之后,就可以在另 ...