如何使用 extract-text-webpack-plugin 导出多个文件

yankeys 发布于2019-08-26 11:34 / 1041人阅读

摘要：注意字段的用法以上的功能有一个致命弊端每次添加包时，都需要重新修改添加包会让所有模块恢复默认状态，临时用是没问题的。

最近写 Vue 遇到了问题，来自于这里自定义块；

简单来说，我想和官方教程一样，在 .vue 文件中包含一个 docs 的标签，像下面这样：

component.vue


## This is an Example component.

根据官方教程，我只需要这样配置 webpack 即可：

webpack.config.js

// webpack 2.x
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
            // 提取  中的内容为原始文本
            "docs": ExtractTextPlugin.extract("raw-loader"),
          }
        }
      }
    ]
  },
  plugins: [
    // 输出 docs 到单个文件中
    new ExtractTextPlugin("docs.md")
  ]
}

但是，现在我是要将所有的 .css 文件导出为一个 css 包，同时将所有的 docs 导出为一个文档包。

按照 extract-text-webpack-plugin 的官方教程，使用如下：

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

看文档这样好像是可以的，但是新问题又出现了，我用的是 vue-cli 的 webpack 模版构建的项目，里面的 module 和 plugins 两个配置是分开在两个不同文件中的，这就产生了两种解决思路：

把 module 和 plugins 写在同一个文件中，然后用官方教程配置即可；

用引用模块的方式，将实例传递给 module 所在配置文件。

第一种方法对我来说改动太大，配置都揉在一个文件看起来太费劲了，不选！
第二种方法。。。我分文件就是想更大程度解耦，这一传实例，可能还不如第一种方法，弃之！！

那咋办呢？去看 extract-text-webpack-plugin 源码！

算了，考虑到能搜这文章的，应该没多少想看源码的，那我就不讲源码直接贴方法了：

在 extract-text-webpack-plugin 这个插件中，有一个配置项叫 id ，但是不管是官方教程还是代码中，都没有把这个特性真正开放出来，这里我们就需要 hack 一下了。

打开你项目中的 node_modules 文件夹，找到 extract-text-webpack-plugin 这个文件夹，然后打开，找到 schema 这个文件夹，其中有两个 .json 文件，我们需要手动来修改这两个文件。

在两个 .json 文件中，为 properties 对象增加一个子对象，如下：

修改前

{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "allChunks": {
      "type": "boolean"
    },
    "disable": {
      "type": "boolean"
    },
    "omit": {
      "type": "boolean"
    },
    .....
  }
}

修改后

{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "id": {
      "type": "string"
    },
    "allChunks": {
      "type": "boolean"
    },
    "disable": {
      "type": "boolean"
    },
    "omit": {
      "type": "boolean"
    },
    .....
  }
}

loader.json 和 plugin.json 两个文件都需要增加

修改完后，我们就可以这样写啦：

以下是将 .less 文件和 .css 文件打包成一个 css 文件，然后将 .md 文件统一打包成一个大的 md 文件。⚠️注意 id 字段的用法：

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

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          id: "css",
          use: ["css-loader", "postcss-loader"]
        })
      },
      {
        test: /.less$/i,
        use: ExtractTextPlugin.extract({
          id: "css",
          use: ["css-loader", "less-loader"]
        })
      },
      {
        test: /.md$/i,
        use: ExtractTextPlugin.extract({
          id: "doc",
          use: ["raw-loader"]
        })
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      id: "css",
      filename: "stylesheets/[name]-one.css"
    }),
    new ExtractTextPlugin({
      id: "doc",
      filename: "docs/[name].md"
    })
  ]
};

以上的功能有一个致命弊端：每次 yarn 添加包时，都需要重新修改（添加包会让所有模块恢复默认状态），临时用是没问题的。

为了解决这个问题，我已经提了 pull requests，如果项目有需要，可以保持关注。

云服务器 GPU云服务器多个cdn使用导出文件如何导出邮件 pdf文件导出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107156.html

extract-text-webpack-plugin用法

摘要：一背景最近在做一个项目，项目本身是用创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的分别进行文件打包。于是开始研究插件。仅限高级用法默认情况下，自动生成结果文件的文件名。一背景最近在做一个项目，项目本身是用vue-cli创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-p...

wangtdgoodluck 2019-08-23 15:10 评论0 收藏0
Webpack的坑位整理

摘要：在寻找相对路径的文件时会以为根目录，默认为执行启动时所在的当前目录。在文件被添加到依赖图中时，将其转换称为了模块。配置中的两个目标。仅限高级用途，默认情况下自动生成生成文件的文件名。webpack webpack现在是主要的打包工具了，现在网络上也有很多资料可以学习了。这里主要整理了一些基础概念，但没有所有的写，只是把之前遇到的问题记录了一下。本文的原文在我的博客中：github.com...

lidashuang 2019-05-23 17:34 评论0 收藏0
从0到1搭建webpack2+vue2自定义模板详细教程

摘要：安装安装完成之后，你应该可以使用了，方式如下上述命令应该自动在浏览器中打开。前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用官方的webpack模板居多，不过对于很多人来说，官方的webpack模板的配...

cartoon 2019-08-20 16:38 评论0 收藏0
从零开始的webpack生活-0x015：ExtractTextWebpackPlugin分离样式

摘要：概述上一章讲的是，这一章讲的是依旧是没有任何关系。配合插件自动插入修改配置打包并查看它以的形式被插入头部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，请查阅关于章节资源源代码 0x001 概述上一章讲的是Dll，这一章讲的是ExtractTextWebpackPlugin,依旧是没有任何关系。 0x002 插件介绍这个插件用来将css导出到单独文件 0x003 栗子-不...

Jonathan Shieber 2019-08-21 17:29 评论0 收藏0
大多数项目中会用到的webpack小技巧

摘要：只在中有效你的文件在开发者工具中显示为。参考链接清除日志如果你在使用时看过下面的调试日志你可以使用来关闭它参考链接总结以上就是总结的条关于的建议，这几乎是所有项目都用得到的配置技巧吧原文地址本文是作者对自己所学的webpack技巧的总结，在没有指定特殊情况下适用于webpack 3.0版本。进度汇报使用webpack --progress --colors这样可以让编译的输出...

Nekron 2019-08-02 15:58 评论0 收藏0