备注：
 提炼上面引用的css
 
1. 插件配置
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`,

   })

  ]

}
2. 插件安装
yarn add extract-text-webpack-plugin --dev
3. 构建
yanr run build
4. 运行
index.html 修改

<html>

<link href="dist/main_0ca7af0d.css" rel="stylesheet">

<body>

<div id="app"></div>

<script src="dist/bundle.js"></script>

</body>

</html>
5. 参考资料
https://www.npmjs.com/package/extract-text-webpack-plugin

https://github.com/webpack-contrib/extract-text-webpack-plugin
 
 
 
 

webpack extract-text-webpack-plugin的更多相关文章

  1. webpack之loader和plugin简介

    webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...

  2. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

  3. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  4. webpack系列--浅析webpack的原理

    一.前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的.如果摒弃这些开发框架 ...

  5. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  6. [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 ...

  7. 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法

    现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...

  8. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  9. webpack中loader和plugin的概念理解

    对于 loader ,它就是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将 A.scss 或 A.less 转变成 B.css,单纯的文件转换过程: 对于 plugin,它就是一个扩 ...

  10. webpack config to use plugin and webpack-dev-server

    Demo3操作手册 本Demo演示如何配合各种plugin进行偏复杂的使用 准备环境 初始化环境, cd到demo1目录之后, 执行如下命令: npm init -y npm install webp ...

随机推荐

  1. Linux常用插件

    文件传输 虚拟机用xshell连接时,拖拽传输插件 yum install lrzsz setup界面化工具 yum install setuptool yum install ntsysv    # ...

  2. 关于BFS和dijkstra（2019.04.20）

    我的BFS板子 struct node{/*略*/};//表示一个状态 std::map<node,bool>vis;//判断每个状态是否已访问过 std::queue<node&g ...

  3. HDU 5698 大组合数取模(逆元)

    瞬间移动 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...

  4. Struts2异常处理配置

    <package name="lee" extends="struts-default"> <!--定义全局结构映射 --> <g ...

  5. linux-Centos7安装nginx

    首先配置linux环境,我这里是刚刚装好linux,所以一次性安装了一系列我需要到的环境: yum install pcre pcre-devel zlib zlib-devel openssl op ...

  6. mac下通过brew切换php版本

    第一步,先安装 brew    Brew 是 Mac 下面的包管理工具,通过 Github 托管适合 Mac 的编译配置以及 Patch,可以方便的安装开发工具. Mac 自带ruby 所以安装起来很 ...

  7. 【nyoj-1233】差值

    描述 输入一个整数数组,将它们连接起来排成一个数,找出能排出的所有数字中最大,最小的两个,输出两个数的差值.例如输入数组{1,  2},则输出9.     输入 第一行输入一个整数T,表示有T组测试数 ...

  8. TStringHelper.Split

    作为对泛型的支持,TStringHelper.Split方法理所应当地出现了. 示例代码1: var  iText: string;  iAStr: TArray<string>;  I: ...

  9. 通过ping 主机名，或者主机名对应的IP地址

    通过ping 主机名,或者主机名对应的IP地址: 如下图: 懵了吧? 但是你用 ping 主机名 -4

  10. Linux 内核驱动自动创建设备节点并挂载设备

    *注:本文来自http://blog.csdn.net/lwj103862095/article/details/17470573 一.首先需要在最开始定义两个数据结构: static struct ...