extract-text-webpack-plugin 的使用及安装

extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;首先我先来介绍下这个插件的安装方法:

npm install extract-text-webpack-plugin --save-dev

首先进入项目的根目录,然后执行以上命令进行插件的安装,插件安装完成后,接下来我们要做的就是在webpack.config.js中引入该插件

const ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = {module: {rules: [{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})}]},plugins: [new ExtractTextPlugin("styles.css"),]
}

该插件有三个参数意义分别如下

use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径

转载于:https://www.cnblogs.com/xiaozhumaopao/p/6902687.html

extract-text-webpack-plugin 的使用及安装相关推荐

Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件动态生成html文件并自动引入js文件静态文件无需加载js或css文件,通过设置入口文件可以将 ...
在把webpack作为本地开发依赖安装的时候报错
在把webpack作为本地开发依赖安装的时候报错 Refusing to install webpack as a dependency of itself 原因是package.json里的name ...
Sublime Text 无法使用Package Control或插件安装失败的解决方法
Sublime Text用了一年多了,公司搬家最近突然发现Package Control无法安装新插件了,虽然不影响原有功能的使用,还是要解决它.由于本人用Windows系统,只讨论Windosw下的 ...
Sublime Text 无法使用Package Control或插件安装失败的解决方法【转】
Sublime Text用了一年多了,公司搬家最近突然发现Package Control无法安装新插件了,虽然不影响原有功能的使用,还是要解决它.由于本人用Windows系统,只讨论Windosw下的 ...
【已解决】Html Webpack Plugin Error；html-withimg-loader无法正常解析html内的img
升级webpack之后发现原本之前用的好好的配置报错了: 控制台报错: ERROR in Error: Parse Error: <img src={"default":&q ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
Webpack 2 视频教程 002 - NodeJS 安装与配置
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
Sublime Text 由于中文用户名导致无法安装插件
最近新换了WIN8.1 安装sublime Text后总是无法成功安装插件把package control 的debug 设置改为true 后发现是网络问题连接 https://sublime. ...
webpack笔记_(1)_webpack 安装
webpack不仅可以解析jsx,也可以将es6转换为es5语法. 最终,它把这些代码都打包成一个叫bundle.js的文件,我们在html文件中只引入这么一个js文件就可以了! 打包后,引用的语法 ...
windows下vue-cli及webpack 构建网站(一)环境安装
1.安装node.js,Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也 ...

extract-text-webpack-plugin 的使用及安装

extract-text-webpack-plugin 的使用及安装相关推荐

最新文章

热门文章