2016-10-15 5 views
0

2つのエントリポイントを作成し、ExtractTextPluginを使用して私のcss(sassからコンパイル)とjsを分離しようとしていますが、何らかの理由で空のbundle.js(マニフェストのjsコードを除く)と正しいstyle.cssファイル。私はこれは私が私のwebpack.config.jsの構成方法に関係していると確信していますが、私はちょうど私がここで間違ってやっているかを把握することはできません...Webpackバンドル分割で空のbundle.jsが生成される

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

/** 
* Default webpack configuration for development 
*/ 
const config = { 
    devtool: 'source-map', 
    entry: { 
    app: path.resolve(__dirname, 'resources/js/app.js'), 
    style: path.resolve(__dirname, 'resources/sass/style.scss') 
    }, 
    output: { 
    path: path.resolve(__dirname, 'public/scripts'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style', 'css?minimize!resolve-url!sass?sourceMap'), 
     include: path.resolve(__dirname, 'resources/sass') 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url' 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('../css/[name].css'), 
    ], 
    devServer: { 
    contentBase: './public', 
    colors: true, 
    historyApiFallback: true, 
    inline: true 
    } 
} 

/** 
* If bundling for production, optimize output 
*/ 
if (process.env.NODE_ENV === 'production') { 
    config.plugins.push(
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({comments: false}), 
    new webpack.DefinePlugin({ 
     'process.env': {NODE_ENV: JSON.stringify('production')} 
    }) 
) 
} 

module.exports = config 

とのWebPACKを実行しているの出力:

webpack console output

私は結果bundle.js CSS/SASSを行うには、すべてをコメントアウトすると正常に見えます。単純なCSSソースファイルでも試しましたが、これは同じ空の結果を与えます。おそらく私はCommonsChunkPluginを何とか使う必要がありますか?どんな助けでも大歓迎です。

+0

最初に - これを取り除く 'style:path.resolve(__ dirname、 'resources/sass/style.scss')' second - '新しいExtractTextPlugin( '../ css/[name] .css'、{allChunks :true}) '、第3 - あなたのページに' link'タグを含めて、あなたのスタイルはここになければなりません。 –

+0

残念ながら仕事はありません。はい、私のbundle.jsは今作成されましたが、style.cssは生成されていません。 –

答えて

0

は、だから、私は今も小さなstyle.jsで終わるん

output: { 
    path: path.resolve(__dirname, 'public/scripts'), 
    filename: '[name].js' 
} 

output: { 
    path: path.resolve(__dirname, 'public/scripts'), 
    filename: 'bundle.js' 
} 

を変更することにより、bundle.jsとのstyle.cssの両方を生成することができたとstyle.js.mapファイル(私が思うwebpackマニフェストを含む)。

+0

残りの 'style.js'ファイルはhttps://github.com/webpack/webpack/issues/1967のためです(私が思う)。 – richvdh

関連する問題