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 ...
随机推荐
- 在 Ubuntu 里如何下载、安装和配置 Plank Dock
一个众所周知的事实就是,Linux 是一个用户可以高度自定义的系统,有很多选项可以选择 —— 作为操作系统,有各种各样的发行版,而对于单个发行版来说,又有很多桌面环境可以选择.与其他操作系统的用户一样 ...
- WPF：自定义ListBox的选择样式
首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的, SystemColors的HighlightBrushKey和HighlightTex ...
- IOS-下载动画
就2小时教会你抽丝剥茧CAAnimation核心动画之精美的下载动画 header 设计灵感 设计此效果的作者 Nick; images 开始之前你需要了解的 先上一张CAAnimation层次图: ...
- IOS-Storyboard全解析-第二部分
[IOS] Storyboard全解析-第二部分 如果你想了解更多Storyboard的特性,那么你就来对了地方,下面我们就来接着上次的内容详细讲解Storyboard的使用方法. 在上一篇<S ...
- IOS-如何锁定Xcode的API头文件
如何锁定Xcode的API头文件1, 打开终端2, 前往Xcode.app, 命令: cd /Applications/Xcode.app3, 把头文件修改为只读, 命令: sudo chown -h ...
- Java开发微信公众号模板消息【同步|异步】
第一步:申请模板消息功能并添加模板 在微信公众平台找到你需要的模板,并添加上即可: 第二步:添加功能模块后开始开发 功能中使用的类及代码: 发送数据主实体类: Template.java packag ...
- Idea_02_常用配置
一.前言 在上一节,我们安装并激活了IDEA,这一节我们来设置下Idea的常用配置: 项目相关配置 Idea常用配置 二.项目相关配置 运行Idea,出现下图 1.配置默认JDK 1.1 添加 SDK ...
- 记用ajax网页跳转大坑——后台执行了，但是没有跳转
搭建javaweb服务器的时候,把jsp文件放在WEB-INF目录下面,因为超链接不能所有只能通过拦截器,用do方法跳转 controller写的是对的: @Controller public cla ...
- 转：JAVA CAS原理深度分析
看了一堆文章,终于把Java CAS的原理深入分析清楚了. 感谢GOOGLE强大的搜索,借此挖苦下百度,依靠百度什么都学习不到! 参考文档: http://www.blogjava.net/xylz/ ...
- Linux:更改hostname主机名
更改hostname主机名 查看主机名 hostname 临时更改主机名 hostname youname 更改永久生效主机名 1)更改配置文件 vi /etc/sysconfig/network 2 ...