的WebPack 2 - 之後的文本提取冗餘包文件

這裏是我的WebPack配置的公共要點，基本上是一個稍微修改的WebPack配置從角CLI彈出：的WebPack 2 - 之後的文本提取冗餘包文件

https://gist.github.com/sparkbuzz/3cd017671751083e2af8c10a1ad37747

此的WebPack版本是產生風格.bundle.css和styles.bundle.js，但styles.bundle.js包含評論說，讀線：

// removed by extract-text-webpack-plugin

styles.bundle.js文件是完全多餘的，因爲提取插件刪除了所有內容，並按照預期將其轉儲到styles.bundle.css。

我怎樣才能避免加載styles.bundle.js，作爲styles.bundle.css文件從一個鏈接裏面裝我造成的index.html。

在webpack.config.js有該extract-text-webpack-plugin的兩個實例：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const extractMainCSS = new ExtractTextPlugin('[name].bundle.css'); 
const extractSplashCSS = new ExtractTextPlugin('splash.css');

有對風格的入口點是用於具有styles.bundle.js的原因：

styles: [ 
     "./src/styles/styles.scss", 
     "./src/styles/vendor.scss" 
    ],

然後生成一些規則splash.css和styles.bundl e.css

{ 
    include: [ 
     path.join(process.cwd(), "src/styles/splash.scss") 
    ], 
    exclude: [ 
     path.join(process.cwd(), "src/styles/styles.scss"), 
     path.join(process.cwd(), "src/styles/vendor.scss") 
    ], 
    test: /.scss$/, 
    loaders: extractSplashCSS.extract({ 
     use: [ 
      'css-loader', 
      'postcss-loader', 
      'sass-loader' 
     ] 
    }) 
}, 
{ 
    exclude: [ 
     path.join(process.cwd(), "src/styles/styles.scss"), 
     path.join(process.cwd(), "src/styles/vendor.scss"), 
     path.join(process.cwd(), "src/styles/splash.scss") 
    ], 
    test: /\.scss$/, 
    loaders: [ 
     "exports-loader?module.exports.toString()", 
     "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 
     "postcss-loader", 
     "sass-loader" 
    ] 
}, 
{ 
    exclude: [ 
     path.join(process.cwd(), "src/styles/splash.scss"), 
    ], 
    include: [ 
     path.join(process.cwd(), "src/styles/styles.scss"), 
     path.join(process.cwd(), "src/styles/vendor.scss") 
    ], 
    test: /\.scss$/, 
    loaders: extractMainCSS.extract({ 
     use: [ 
      "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 
      "postcss-loader", 
      "sass-loader" 
     ] 
    }) 
},

和萃取插件的兩個實例已被添加到插件對象：

plugins: [ 
    extractMainCSS, 
    extractSplashCSS,

來源

2017-04-12 josef.van.niekerk

我最終什麼事做的是恢復樣式捆綁作爲它自己的一個普通的WebPack捆綁，這意味着沒有.css文件。

我改變了我的規則裝載機部分：

loaders: ExtractTextPlugin.extract({ 
    use: [ 
     "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 
     "postcss-loader", 
     "sass-loader" 
    ], 
    /... 
})

以下幾點：

loaders: [ 
     "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", 
     "postcss-loader", 
     "sass-loader" 
    ], 
    /... 
})

沒有必要在這裏文本提取。對我來說很重要的是我設法解壓並最終將splash.css內聯到

我還想看看多個實例會發生什麼情況，並將禁用的屬性設置爲不同的值。

來源

2017-04-13 07:48:10

的WebPack創建用於每一個入口點束。如果您不想創建捆綁包，則必須將CSS文件包含在另一個入口點中。 extract-text-webpack-plugin無論如何都會刪除所有的CSS，但如果你仔細想想，CSS應該是你使用它的捆綁包的一部分，在你的情況下，這可能是main。

您可以刪除styles條目和.scss文件添加到main項：

main: [ 
    "./src/main.ts", 
    "./src/styles/styles.scss", 
    "./src/styles/vendor.scss" 
]

要爲樣式（styles.bundle.css）你還需要改變你的extractMainCSS得到相同的名稱。

const extractMainCSS = new ExtractTextPlugin('styles.bundle.css');

來源

2017-04-12 17:52:10

的WebPack 2 - 之後的文本提取冗餘包文件

回答

相關問題