欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

extract-text-webpack-plugin用法详解

程序员文章站 2022-05-25 18:46:38
一 背景 最近在做一个项目,项目本身是用vue-cli创建的单页面应用,由于项目扩展需要创建多页面,所以需要对不同的html分别进行css文件打包。于是开始研究ext...

一 背景

最近在做一个项目,项目本身是用vue-cli创建的单页面应用,由于项目扩展需要创建多页面,所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-plugin插件。

二 插件介绍

打包样式有两种方法,一种是使用style-loader自动将css代码放到生成的style标签中,并且插入到head标签里。另一种就是使用extract-text-webpack-plugin插件,将样式文件单独打包,打包输出的文件由配置文件中的output属性指定。然后我们在入口html页面写个link标签引入这个打包后的样式文件。

三 插件使用

1 插件安装:

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

2 插件使用

在webpack.config.js中引入

const extracttextplugin = require("extract-text-webpack-plugin");

module.exports = {
 module: {
 rules: [
  {
  test: /\.css$/,
  use: extracttextplugin.extract({
   fallback: "style-loader", // 编译后用什么loader来提取css文件
   use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
  })
  }
 ]
 },
 plugins: [
 new extracttextplugin("styles.css"),
 ]
}

多实例

在实例上也有个 extract function。如果你有1个以上的 extracttextplugin 的实例,你应该使用实例上的 extract。

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
 ]
};

抽取 less 或者 sass

配置是相同的, 根据需求使用 sass-loader 取代 less-loader。

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

module.exports = {
 module: {
 rules: [
  {
  test: /\.scss$/,
  use: extracttextplugin.extract({
   fallback: 'style-loader',
   use: ['css-loader', 'sass-loader']
  })
  }
 ]
 },
 plugins: [
 new extracttextplugin('style.css')
 //if you want to pass in options, you can do so:
 //new extracttextplugin({
 // filename: 'style.css'
 //})
 ]
}

url() resolving

如果你运行 webpack 发现 urls resolve 不对。你可以使用 options 扩展 loader 功能。 url: false 使得你的路径 resolve 的时候不会发生任何变化。

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

module.exports = {
 module: {
 rules: [
  {
  test: /\.scss$/,
  use: extracttextplugin.extract({
   fallback: 'style-loader',
   use: [
   {
    loader: 'css-loader',
    options: {
     // if you are having trouble with urls not resolving add this setting.
     // see https://github.com/webpack-contrib/css-loader#url
     url: false,
     minimize: true,
     sourcemap: true
    }
   }, 
   {
    loader: 'sass-loader',
    options: {
     sourcemap: true
    }
   }
   ]
  })
  }
 ]
 }
}

改变文件名

filename 参数可以是 function。通过传入 getpath 去处理像 css/[name].css 的格式,返回一个真正的文件名, css/js/a.css。你可以替换 css/js 为 css,这样你可以得到一个新的路径 css/a.css。

entry: {
 'js/a': "./a"
},
plugins: [
 new extracttextplugin({
 filename: (getpath) => {
  return getpath('css/[name].css').replace('css/js', 'css');
 },
 allchunks: true
 })
]

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