如何使用 extract-text-webpack-plugin 導出多個文件

yankeys 發布于2019-08-26 11:34 / 1083人閱讀

摘要：注意字段的用法以上的功能有一個致命弊端每次添加包時，都需要重新修改添加包會讓所有模塊恢復默認狀態，臨時用是沒問題的。

最近寫 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文件導出

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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