webpack的exract-text-webpack-plugin插件的疑问

发布于 2022-09-05 10:16:34 字数 1604 浏览 16 评论 0

//webpack.config.js
const extractCSS = new ExtractTextPlugin('[name]-one.css');
module: {
        rules: [
            
            {
                test: /\.css$/,
                 use: extractCSS.extract([ 'css-loader', 'postcss-loader' ]) //疑问
            }
        ]
    },
    
plugins: [
    extractCSS
  ]

刚学习webpack,请问注释行的代码是什么意思,查了官方文档没看明白。

官方实例:

Multiple Instances There is also an extract function on the instance.
You should use this if you have more than one instance of ExtractTextPlugin.

const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
// Create multiple instances 
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      }
    ]
  },
  plugins: [
    extractCSS
  ]
};

这是官方对extract方法的参数说明:

extract

ExtractTextPlugin.extract(options: loader | object)
Creates an extracting loader from an existing loader. Supports loaders of type { loader: [name]-loader -> {String}, options: {} -> {Object} }.

  1. options.use
    Loader(s) that should be used for converting the resource to a CSS exporting module (required)
  2. options.fallback
    loader(e.g 'style-loader') that should be used when the CSS is not extracted (i.e. in an additional chunk when allChunks: false)
  3. options.publicPath
    Override the publicPath setting for this loader

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夜未央樱花落 2022-09-12 10:16:36

你这是webpack1.x吧?
首先webpack在页面中引用某css比如require("a.css"); 如果没有配置项的话是css in js形式,
如果配置了style-loader是可以把css文件提取到style标签里边然后添加到head标签内的,如果在此之上配置了ExtractTextPlugin插件,就可以把这样式提取到文件中,不知道LZ了解了吗,毕竟单纯的理论有些晦涩(less sass等同理,只是多了一些配置)?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文