Webpack 2：從結果中排除css條目

我想用webpack編譯scss和js。但是，只要我在Symfony 3中使用它，其中只有前端的一些頁面使用javascript組件，我想將css編譯爲獨立文件，並使用舊的<link href="style.css">而不是將css導入到javascript模塊中。Webpack 2：從結果中排除css條目

我設法做到以下webpack.config.js，我應該產生js/script.js和css/style.css。 它的工作原理，但它也產生js/style.js，我不需要也不想要。我想問題是，入口「風格」也產生輸出JS，即使通過它處理ExtractTextPlugin，但如何告訴webpack不生成一個條目的JavaScript輸出？

我也試過不使用多個入口點並將index.js添加到一個入口點列表main.scss。當然，它並沒有產生額外的文件，但是轉譯後的script.js包含了我不想要的main.scss的引用。我想要一個純粹的解決方案來管理完全獨立於腳本的樣式。

const path = require('path'); 
const outputPath = path.join(__dirname, '..', 'www'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
module.exports = { 
    devtool: 'source-map', 
    entry: { 
     script: ['./src/js/index.js'], 
     style: ['./src/scss/main.scss'] 
    }, 
    target: 'web', 
    output: { 
     filename: 'js/[name].js', 
     path: outputPath 
    }, 
    resolve: { 
     extensions: ['.js'] 
    }, 
    module: { 
     rules: [ 
      { // sass/scss loader for webpack 
       test: /\.(sass|scss)$/, 
       loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ // define where to save the file 
      filename: 'css/[name].css', 
      allChunks: true, 
     }) 
    ] 
};

來源

2017-08-21 amik

的WebPack似乎總是需要一個源代碼文件在外部樣式帶來的，無論是CSS或無禮的話 - 我不認爲有無論如何要解決這個問題。如果您只想將這些編譯的CSS樣式文件導入到您的應用程序中，並且不想擁有關聯的.js文件，那麼只需使用node-sass編譯器並生成一個.css文件。然後或者使用webpack css加載器通過webpack將其引入到您的應用中，或者您可以在您的html文件中手動引用它。

否則只需要一個帶有單一導入的Sass風格的js文件，然後在構建之後將其刪除。無論哪種方式，你都會得到相同的CSS。

來源

2017-08-22 15:08:59 BoxerBucks

好吧，後面的 - 在構建之後刪除不必要的JS - 實際上是我當前的解決方案，因此我將繼續使用它。 – amik

Webpack 2：從結果中排除css條目

回答

相關問題