Webpackのベンダーが私のCSSを無効にしています

Question

entry: { 
    vender: [ 
     'react', 
     'react-dom', 
     'eslint-plugin-react', 
    ], 
}, 

上記のコードスニペットが私の問題の原因と思われます。このコードサンプルは、webpack.config.jsファイルの一部です。私はこのアプリケーションのための糸のビルドを実行する場合は、ExtractTextWebpackPlugin（私のコードではETP）を介して作成されていた私のCSSファイルを削除します。上記のコードセクションをコメントアウトすると、ビルドを実行した後にCSSファイルがパブリックディレクトリに存在します。誰も私がこの問題をどのように改善できるか知っていますか？

const ETP = require('extract-text-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const merge = require('webpack-merge'); 
const OpenBrowserPlugin = require('open-browser-webpack-plugin'); 
const parts = require('./webpack.parts'); 
const path = require('path'); 
const webpack = require('webpack'); 
const glob = require('glob'); 

const PATHS = { 
    public: path.join(__dirname, 'public'), 
    src: path.join(__dirname, 'src'), 
    styles: path.join(__dirname, 'src', 'scss'), 
}; 

const options = { 
    host: 'localhost', 
    port: '8085', 
}; 

const commonConfig = merge([ 
    { 
    entry: PATHS.src, 
    output: { 
     path: PATHS.public, 
     filename: '[name].bundle.js', 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
     title: 'Jason Ganz Portfolio', 
     template: path.join(PATHS.src, 'index.html'), 
     }), 
     new OpenBrowserPlugin({ 
     url: `http://${options.host}:${options.port}`, 
     }), 
     new ETP('style.css'), 
     new webpack.LoaderOptionsPlugin({ 
     options: { 
      eslint: { 
      failOnWarning: false, 
      failOnError: true, 
      fix: false, 

      //  // Output to Jenkins compatible XML 
      //  // outputReport: { 
      //  //  filePath: 'checkstyle.xml', 
      //  //  formatter: require('eslint/lib/formatters/checkstyle'), 
      //  // }, 
      }, 
     }, 
     }), 
     parts.purifyCSS({ 
     paths: glob.sync(`${PATHS.src}/**/*.js`, {nodir: true}), 
     }), 
    ], 
    }, 
    parts.loadSASS(PATHS.styles), 
    parts.loadJSX(), 


]); 

const productionConfig = merge([ 
    //Generates Source Maps for js files 
    parts.generateSourceMaps({ type: 'source-map' }), 
    { 
    entry: { 
     vender: [ 
     'react', 
     'react-dom', 
     'eslint-plugin-react', 
     ], 
    }, 
    plugins: [ new webpack.optimize.CommonsChunkPlugin({name: 'vendor'})], 
    }, 
]); 

const developmentConfig = merge([ 
    parts.devServer({ 
    host: options.host, 
    port: options.port, 
    path: PATHS.public, 
    }), 
    { 
    output: { 
     devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]', 
    }, 
    }, 
    parts.generateSourceMaps({ type: 'cheap-module-eval-source-map' }), 
]); 

module.exports = (env) => { 
    if(env == 'development') { 
    return merge(commonConfig, developmentConfig); 
    } 

    return merge(commonConfig, productionConfig); 
}; 

私のローダーとモジュールは、別のwebpack.parts.jsファイルに保存されています（下の図を参照）。

const ETP = require('extract-text-webpack-plugin'); 
const PurifyCSSPlugin = require('purifycss-webpack'); 

exports.devServer = ({host, port, path} = {})=> ({ 
    devServer: { 
    compress: true, 
    contentBase: path, 
    historyApiFallback: true, 
    host, 
    port, 
    overlay: { 
     errors: true, 
     warnings: true, 
    }, 
    stats: 'errors-only', 
    }, 
}); 

exports.generateSourceMaps = ({ type }) => ({ 
    devtool: type, 
}); 

exports.loadCSS =() => ({ 
    module:{ 
    loaders: [{ 
     test: /\.css$/, 
     loader: ['style-loader','css-loader'], 
    }], 
    }, 
}); 

exports.loadJSX =() => ({ 
    module:{ 
    loaders: [{ 
     test: /\.(js|jsx)$/, 
     exclude: '/node_modules/', 
     loader: 'babel-loader', 
    }], 
    }, 
}); 

exports.loadSASS = (path) => ({ 
    module: { 
    loaders: [{ 
     test: /\.(css|sass|scss)$/, 
     loader: ETP.extract({ 
     fallback: 'style-loader', 
     use: 'css-loader!postcss-loader!sass-loader', 
     }), 
     include: path, 
    }], 
    }, 
}); 


exports.purifyCSS = ({ paths }) => (new PurifyCSSPlugin({paths})) 

Answer 1

あなたは、エントリプロパティでそのエラーをキャッチするため