extract-text-webpack-plugin用法

wangtdgoodluck 發布于2019-08-23 15:10 / 2312人閱讀

摘要：一背景最近在做一個項目，項目本身是用創建的單頁面應用，由于項目擴展需要創建多頁面，所以需要對不同的分別進行文件打包。于是開始研究插件。僅限高級用法默認情況下，自動生成結果文件的文件名。

一背景
最近在做一個項目，項目本身是用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"),
  ]
}

四 API

new ExtractTextPlugin([id: string], filename: string, [options])

id此插件實例的唯一標識。（僅限高級用法;默認情況下，自動生成）

filename結果文件的文件名。可能包含[name]，[id]和[contenthash]。
[name] 塊的名稱
[id] 塊的標識
[contenthash] 提取文件內容的哈希值

options

allChunks 從所有其他塊中提?。J情況下，它僅從初始塊中提取）

disable 禁用插件

ExtractTextPlugin.extract([notExtractLoader], loader, [options]
從現有加載器創建提取加載器。

notExtractLoader（可選）在未提取css時應使用的加載程序（即在其他塊中時allChunks: false）

loader 應該用于將資源轉換為css導出模塊的加載器。

options
publicPath覆蓋publicPath此加載程序的設置。

五擴展
該實例其實還有一個擴展函數。如果你有多個ExtractTextPlugin，你應該使用它。

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

// multiple extract instances
let extractCSS = new ExtractTextPlugin("stylesheets/[name].css");
let extractLESS = new ExtractTextPlugin("stylesheets/[name].less");

module.exports = {
  ...
  module: {
    loaders: [
      {test: /.scss$/i, loader: extractCSS.extract(["css","sass"])},
      {test: /.less$/i, loader: extractLESS.extract(["css","less"])},
      ...
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

云服務器 GPU云服務器嵌套用法數組用法通知用法變量用法

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101625.html

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

摘要：注意字段的用法以上的功能有一個致命弊端每次添加包時，都需要重新修改添加包會讓所有模塊恢復默認狀態，臨時用是沒問題的。最近寫 Vue 遇到了問題，來自于這里自定義塊；簡單來說，我想和官方教程一樣，在 .vue 文件中包含一個 docs 的標簽，像下面這樣： component.vue ## This is an Example component. {{msg}} ...

yankeys 2019-08-26 11:34 評論0 收藏0
從零開始的webpack生活-0x015：ExtractTextWebpackPlugin分離樣式

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

Jonathan Shieber 2019-08-21 17:29 評論0 收藏0
Webpack中hash的用法

摘要：在的配置項中，可能會見到這樣的字符。的情況的可以指定。值是特定于整個構建過程的。。因此，以上兩個值中更推薦的是。中的則和前面的一樣，指定了結果的截取長度。的情況被引用的通過來得到帶的文件。所以，這可能并不是我們想要的。在webpack的配置項中，可能會見到hash這樣的字符。當存在hash配置的時候，webpack的輸出將可以得到形如這樣的文件： page1_bundle_54e8...

蘇丹 2019-08-20 18:09 評論0 收藏0
react+webpack項目常用的插件(plugins)

一、HtmlWebpackPlugin使用： npm install html-webpack-plugin --save-dev 解釋：這個插件是簡化創建生成html（h5）文件用的，如果你引入的文件帶有hash值的話，這個尤為的有用，不需要手動去更改引入的文件名！默認生成的是index.html,基本用法為： var HtmlWebpackPlugin = require(html-webp...

cyixlq 2019-08-20 15:52 評論0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步原文地址有空就來看看個人技術小站, 我一直都在 0. 課程介紹和資料本次課程的代碼目錄(如下圖所示)：s...

趙連江 2019-08-29 16:36 評論0 收藏0