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 ...
随机推荐
- bzoj3673可持久化并查集
n个集合 m个操作操作:1 a b 合并a,b所在集合2 k 回到第k次操作之后的状态(查询算作操作)3 a b 询问a,b是否属于同一集合,是则输出1否则输出0 0<n,m<=2*10^ ...
- 从零开始搭建webpack+react开发环境
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...
- leetcode 427. Construct Quad Tree
We want to use quad trees to store an N x N boolean grid. Each cell in the grid can only be true or ...
- 015——数组（十五）sort natsort shuffle natcasesoft array_multisort
<?php /*数组排序函数 * sort natsort shuffle natcasesoft array_multisort */ //sort() 对数组元素进行递增的排序, /*$ar ...
- java程序设计基础篇 复习笔记 第五单元
1. method header: modifier, return value type, method signature(method name, parameter) method body ...
- eureka-8-Eureka 的健康检查
eureka.client.healthcheck.enabled:true 应用程序将自己的健康状态传播到Eureka Server
- 【html5】hashchange Event – 监测URL的hash变化
通过URL传值,在?后附加以=连接的键值对,各键值对间以&连接:也可以通过URL传递页面参数,在”#”后附加的方式.两者最大的一个 区别在于:后者不会发起请求,不会导致页面刷新.常见应用场景在 ...
- SpringXML方式配置bean的生命周期lifecycle
在Spring中容器在初始化某个bean的时候会有相应的生命周期,类似于Servlet,有相应的init,destory等方法 例如:如下service 1 2 3 4 5 6 7 8 9 10 11 ...
- jsp页面图片显示不出来
jsp页面就是MyJsp.jsp <body> This is my JSP page. <br> <img src="img/top.jpg"> ...
- open()参数宏的意义 O_TRUNC
C语言中一些基本函数 int _open(char *pathname,int access)为读或写打开一个文件, 按后按access来确定是读文件还是写文件,access值见下表 ┌──────┬ ...