成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何使用 extract-text-webpack-plugin 導(dǎo)出多個(gè)文件

yankeys / 1090人閱讀

摘要：注意字段的用法以上的功能有一個(gè)致命弊端每次添加包時(shí)，都需要重新修改添加包會(huì)讓所有模塊恢復(fù)默認(rèn)狀態(tài)，臨時(shí)用是沒(méi)問(wèn)題的。

最近寫(xiě) Vue 遇到了問(wèn)題，來(lái)自于這里 自定義塊；

簡(jiǎn)單來(lái)說(shuō)，我想和官方教程一樣，在 .vue 文件中包含一個(gè) docs 的標(biāo)簽，像下面這樣：

component.vue


## This is an Example component.

根據(jù)官方教程，我只需要這樣配置 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: {
            // 提取  中的內(nèi)容為原始文本
            "docs": ExtractTextPlugin.extract("raw-loader"),
          }
        }
      }
    ]
  },
  plugins: [
    // 輸出 docs 到單個(gè)文件中
    new ExtractTextPlugin("docs.md")
  ]
}

但是，現(xiàn)在我是要將所有的 .css 文件導(dǎo)出為一個(gè) css 包，同時(shí)將所有的 docs 導(dǎo)出為一個(gè)文檔包。

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

看文檔這樣好像是可以的，但是新問(wèn)題又出現(xiàn)了，我用的是 vue-cli 的 webpack 模版構(gòu)建的項(xiàng)目，里面的 module 和 plugins 兩個(gè)配置是分開(kāi)在兩個(gè)不同文件中的，這就產(chǎn)生了兩種解決思路：

把 module 和 plugins 寫(xiě)在同一個(gè)文件中，然后用官方教程配置即可；

用引用模塊的方式，將實(shí)例傳遞給 module 所在配置文件。

第一種方法對(duì)我來(lái)說(shuō)改動(dòng)太大，配置都揉在一個(gè)文件看起來(lái)太費(fèi)勁了，不選！
第二種方法。。。我分文件就是想更大程度解耦，這一傳實(shí)例，可能還不如第一種方法，棄之??！

那咋辦呢？去看 extract-text-webpack-plugin 源碼！

算了，考慮到能搜這文章的，應(yīng)該沒(méi)多少想看源碼的，那我就不講源碼直接貼方法了：

在 extract-text-webpack-plugin 這個(gè)插件中，有一個(gè)配置項(xiàng)叫 id ，但是不管是官方教程還是代碼中，都沒(méi)有把這個(gè)特性真正開(kāi)放出來(lái)，這里我們就需要 hack 一下了。

打開(kāi)你項(xiàng)目中的 node_modules 文件夾，找到 extract-text-webpack-plugin 這個(gè)文件夾，然后打開(kāi)，找到 schema 這個(gè)文件夾，其中有兩個(gè) .json 文件，我們需要手動(dòng)來(lái)修改這兩個(gè)文件。

在兩個(gè) .json 文件中，為 properties 對(duì)象增加一個(gè)子對(duì)象，如下：

修改前

{
  "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 兩個(gè)文件都需要增加

修改完后，我們就可以這樣寫(xiě)啦：

以下是將 .less 文件 和 .css 文件打包成一個(gè) css 文件，然后將 .md 文件統(tǒng)一打包成一個(gè)大的 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"
    })
  ]
};

以上的功能有一個(gè)致命弊端：每次 yarn 添加包時(shí)，都需要重新修改（添加包會(huì)讓所有模塊恢復(fù)默認(rèn)狀態(tài)），臨時(shí)用是沒(méi)問(wèn)題的。

為了解決這個(gè)問(wèn)題，我已經(jīng)提了 pull requests，如果項(xiàng)目有需要，可以保持關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107156.html

相關(guān)文章

  • extract-text-webpack-plugin用法

    摘要：一背景最近在做一個(gè)項(xiàng)目，項(xiàng)目本身是用創(chuàng)建的單頁(yè)面應(yīng)用，由于項(xiàng)目擴(kuò)展需要?jiǎng)?chuàng)建多頁(yè)面，所以需要對(duì)不同的分別進(jìn)行文件打包。于是開(kāi)始研究插件。僅限高級(jí)用法默認(rèn)情況下，自動(dòng)生成結(jié)果文件的文件名。 一 背景最近在做一個(gè)項(xiàng)目，項(xiàng)目本身是用vue-cli創(chuàng)建的單頁(yè)面應(yīng)用，由于項(xiàng)目擴(kuò)展需要?jiǎng)?chuàng)建多頁(yè)面，所以需要對(duì)不同的html分別進(jìn)行css文件打包。于是開(kāi)始研究extract-text-webpack-p...

    wangtdgoodluck 評(píng)論0 收藏0

  • Webpack的坑位整理

    摘要：在尋找相對(duì)路徑的文件時(shí)會(huì)以為根目錄，默認(rèn)為執(zhí)行啟動(dòng)時(shí)所在的當(dāng)前目錄。在文件被添加到依賴圖中時(shí)，將其轉(zhuǎn)換稱為了模塊。配置中的兩個(gè)目標(biāo)。僅限高級(jí)用途，默認(rèn)情況下自動(dòng)生成生成文件的文件名。webpack webpack現(xiàn)在是主要的打包工具了，現(xiàn)在網(wǎng)絡(luò)上也有很多資料可以學(xué)習(xí)了。這里主要整理了一些基礎(chǔ)概念，但沒(méi)有所有的寫(xiě)，只是把之前遇到的問(wèn)題記錄了一下。 本文的原文在我的博客中：github.com...

    lidashuang 評(píng)論0 收藏0

  • 從0到1搭建webpack2+vue2自定義模板詳細(xì)教程

    摘要：安裝安裝完成之后，你應(yīng)該可以使用了，方式如下上述命令應(yīng)該自動(dòng)在瀏覽器中打開(kāi)。 前言 webpack2和vue2已經(jīng)不是新鮮東西了，滿大街的文章在講解webpack和vue，但是很多內(nèi)容寫(xiě)的不是很詳細(xì)，對(duì)于很多個(gè)性化配置還是需要自己過(guò)一遍文檔。Vue官方提供了多個(gè)vue-templates，基于vue-cli用官方的webpack模板居多，不過(guò)對(duì)于很多人來(lái)說(shuō)，官方的webpack模板的配...

    cartoon 評(píng)論0 收藏0

  • 從零開(kāi)始的webpack生活-0x015：ExtractTextWebpackPlugin分離樣式

    摘要：概述上一章講的是，這一章講的是依舊是沒(méi)有任何關(guān)系。配合插件自動(dòng)插入修改配置打包并查看它以的形式被插入頭部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，請(qǐng)查閱關(guān)于章節(jié)資源源代碼 0x001 概述 上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒(méi)有任何關(guān)系。 0x002 插件介紹 這個(gè)插件用來(lái)將css導(dǎo)出到單獨(dú)文件 0x003 栗子-不...

    Jonathan Shieber 評(píng)論0 收藏0

  • 大多數(shù)項(xiàng)目中會(huì)用到的webpack小技巧

    摘要：只在中有效你的文件在開(kāi)發(fā)者工具中顯示為。參考鏈接清除日志如果你在使用時(shí)看過(guò)下面的調(diào)試日志你可以使用來(lái)關(guān)閉它參考鏈接總結(jié)以上就是總結(jié)的條關(guān)于的建議，這幾乎是所有項(xiàng)目都用得到的配置技巧吧 原文地址 本文是作者對(duì)自己所學(xué)的webpack技巧的總結(jié)，在沒(méi)有指定特殊情況下適用于webpack 3.0版本。 進(jìn)度匯報(bào) 使用webpack --progress --colors這樣可以讓編譯的輸出...

    Nekron 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<