webpack生成不必要的輸出文件

我使用多個入口點（一個生成綁定的js文件（main.js），另一個生成css文件（style.css）。我的webpack.config.js文件是產生這兩個文件也是一個style.js文件如何讓它不產生style.js文件webpack生成不必要的輸出文件

webpack.config.js：？

'use strict'; 

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

module.exports = { 
    devtool: 'eval-source-map', 

    entry: { 
    main: [ 
     'webpack-hot-middleware/client?reload=true', 
     path.join(__dirname, './app/main.js')], 

    style: [ 
     'webpack-hot-middleware/client?reload=true', 
     path.join(__dirname, './app/main.css')]}, 

    // any way to indicate that only the 1st entry point should be output to a file? 
    output: { 
    path: path.join(__dirname, '/dist/'), 
    filename: '[name].js', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'app/index.tpl.html', 
     inject: 'body', 
     filename: 'index.html' 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development') 
    }), 
    new ExtractTextPlugin("[name].css") 
    ], 
    module: { 
    rules: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
     "presets": ["react", ["es2015", { "modules": false }], "stage-0", "react-hmre"] 
     } 
    }, { 
     test: /\.json?$/, 
     loader: 'json' 
    }, { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) 
    }] 
    } 
};

的ExtractTextPlugin使用樣式的進出點爲了生成css文件，我不想在bundle輸出中使用這個入口點，有什麼辦法只讓主（第1）入口點用於輸出嗎？或者我應該改變我的方法來生成style.css文件完全？

來源

2017-02-12 ray9209

快速修復：刪除第二個.css條目。您只需要.js條目。

entry: { 
    main: [ 
     'webpack-hot-middleware/client?reload=true', 
     path.join(__dirname, './app/main.js') 
    ], 

    // Remove this entry! 
    // style: [ 
    // 'webpack-hot-middleware/client?reload=true', 
    // path.join(__dirname, './app/main.css') 
    // ] 
}

您需要進口或要求所有使用.css文件（您main.css）在.js文件中的至少一個這樣的（我用的打字稿）的地方：

import "font-awesome/css/font-awesome.css";

爲什麼？

的ExtractTextPlugin使用樣式的進出點來生成CSS文件 ...

不，不！

的方式Webpack作品是：

它通過查看所有javascript從提供項目啓動文件的import和 require部分產生依賴關係圖。
隨着依賴圖Webpack每個文件應用於裝載機上的所有裝載對象的所述屬性test基。這是 ExtractTextPlugin加載程序進來。它會照顧所有.css文件在圖中。
最後，它應用了所有指定的插件。再次， ExtractTextPlugin插件將進來完成 ExtractTextPlugin加載器已開始的工作。

來源

2017-02-13 08:25:34

webpack生成不必要的輸出文件

回答

相關問題