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

 更新时间:2018年06月12日 09:24:25   作者:荆--棘  
这篇文章主要介绍了详解extract-text-webpack-plugin 的使用及安装,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

# for webpack 2
npm install --save-dev extract-text-webpack-plugin
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

首先进入项目的根目录,然后执行以上命令进行插件的安装,插件安装完成后,接下来我们要做的就是在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"),
 ]
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances 
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
   },
   {
    test: /\.less$/i,
    use: extractLESS.extract([ 'css-loader', 'less-loader' ])
   },
  ]
 },
 plugins: [
  extractCSS,
  extractLESS
 ]
};

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript数组方法总结分析

    JavaScript数组方法总结分析

    下面小编就为大家带来一篇JavaScript数组方法总结分析。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-05-05
  • javascript实现的像java、c#之类的sleep暂停的函数代码

    javascript实现的像java、c#之类的sleep暂停的函数代码

    我们都知道java、c#、vb等语言都有sleep暂停的函数,而JavaScript脚本没有类似的功能。
    2010-03-03
  • js实现视频播放时屏幕显示水印

    js实现视频播放时屏幕显示水印

    这篇文章主要为大家详细介绍了js如何实现视频播放时屏幕显示水印的效果,文中的示例代码讲解详细,对我们深入掌握js有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • 你需要知道的TypeScript高级类型总结

    你需要知道的TypeScript高级类型总结

    在开发过程中,为了应对多变的复杂场景,我们需要了解一下 TypeScript 的高级类型。本文就为大家整理了一些需要掌握的TypeScript高级类型,需要的可以参考一下
    2022-08-08
  • 基于JS实现十种酷炫的网页特效

    基于JS实现十种酷炫的网页特效

    之前喜欢收集能美化网页的代码,比如给网页加个背景啦,给鼠标加个特效啦,来来回回也收集到了一些“使用简单”,“效果爆炸”的页面,快来学习一下吧
    2022-04-04
  • javascript 事件绑定问题

    javascript 事件绑定问题

    在子页面(<iframe></iframe>)创建父级事件!当子页面(<iframe></iframe>)被销毁!子页面(<iframe></iframe>)创建父级事件也会被销毁!
    2011-01-01
  • 微信小程序获取用户openid的实现

    微信小程序获取用户openid的实现

    这篇文章主要介绍了微信小程序获取用户openid的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JavaScript canvas实现代码雨效果

    JavaScript canvas实现代码雨效果

    这篇文章主要为大家详细介绍了JavaScript canvas实现代码雨效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • javascript包装对象实例分析

    javascript包装对象实例分析

    这篇文章主要介绍了javascript包装对象,实例分析分析了javascript对象操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript时间操作之年月日星期级联操作

    JavaScript时间操作之年月日星期级联操作

    这篇文章主要介绍了JavaScript时间操作之级联日期选择操作,涉及到年、月、日、星期,感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论