Basic Webpack ExtractTextWebpackPlugin配置

我有一個配置ExtractTextWebpackPlugin for simpy的問題，包括單獨的CSS文件在我的HTML頭標記（使用鏈接標記），這是我相信它的主要目的。Basic Webpack ExtractTextWebpackPlugin配置

我在當前配置webpack.config.js：

var path = require('path'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './app/index.js', 
    output: { 
    filename: "app.js", 
    path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: "css-loader" 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('general.css') 
    ] 
};

在我的主要index.js文件我有require("../style.css");

的style.css被放置在項目的根文件夾。

在我的index.html我有<script src="dist/app.js"></script>

據我所知這應該inlclude general.css在我頭在運行時的標籤，但它不存在。

任何幫助表示讚賞。

來源

2017-04-21 Tetra

你能說出你得到了什麼錯誤嗎？像頁面或控制檯中的任何錯誤 – Niraj

有不同版本的extractTextPlugin for webpack 2＆webpack，請確保安裝正確的一個。 – Niraj

@Niraj我沒有得到任何錯誤，一切都建立並運行良好，沒有錯誤，但我沒有得到結果。我使用的extractTextPlugin版本是* 2.1.0 *和webpack * 2.3.3 *。 – Tetra

ExtractTextPlugin只會從您的包中移除CSS以將其與JavaScript解耦，並且您需要將它包含在HTML中以及包中。

您可以通過讓webpack爲您生成一個HTML文件來自動執行此操作。當你在你的文件名中使用散列時，這是特別有用的。您需要使用html-webpack-plugin，它將自動包含捆綁的JavaScript以及由ExtractTextPlugin提取的CSS。因爲你首先需要下載JavaScript包（第一個網絡請求），那麼你需要執行這個包，然後你需要執行這個包。 JS，需要一些時間來解析，然後你必須下載你的CSS文件（第二個網絡請求）。由於您依賴於首先執行的軟件包，因此您會在短時間內顯示沒有CSS的頁面，或者在網絡連接不良的低端移動設備上顯示大量時間。

這基本上是什麼情況，如果你不使用ExtractTextPlugin而是使用style-loader。 style-loader只是簡單地將您的CSS注入<style>標記，該標記是從您的JavaScript包完成的，因此它仍然依賴於正在執行的包，但至少它不需要CSS的額外網絡請求。這甚至比你期望的ExtractTextPlugin要好，這會使插件無用。

來源

2017-04-21 17:48:40

我的意思是編寫buildtime而不是runtime。在那裏犯了一個錯誤:)但是你仍然對運行時執行提出了一個有效的觀點。使用* html-webpack-plugin *是要走的路，所以我將其標記爲正確的答案。謝謝邁克爾。 – Tetra

Basic Webpack ExtractTextWebpackPlugin配置

回答

相關問題