2016-11-14 11 views
0

ヘルプありがとうございました!Webpackローダーを共有フォルダ用に設定しますか?

私の質問は、どのようにWebpackが適切なコンテンツスクリプトに共有フォルダからアセットをコンパイルするのですか?

私は反応還元型クロムを使用してChrome拡張機能を使用しています。彼らのファイル構造は次のとおりです。

-build 
-content 
-event 
-popup 
package.json 
gulpfile.babel.js 
manifest.json 

一気ファイルが変更を監視し、ビルドに適切なjavascriptの、マニフェスト、およびHTMLファイルをコンパイルします。

コンテンツ、イベント、ポップアップにはそれぞれ独自のwebpack設定があります。

// content/webpack.config.js 
const path = require('path'); 

module.exports = { 

    entry: [ 
    './content/src/scripts/index.js' 
    ], 

    output: { 
    filename: 'content.js', 
    path: path.join(__dirname, '../', 'build'), 
    publicPath: '/' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.jsx', '.scss', '.json'], 
    modulesDirectories: ['node_modules'], 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.(jsx|js)?$/, 
     loader: 'babel', 
     exclude: /(node_modules)/, 
     include: path.join(__dirname, 'src'), 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
    ] 
    } 
}; 

私の拡張子は...ので、私のフォルダは次のようになり、2つのコンテンツのスクリプトを持って、私は共有フォルダからリアクトモジュールをインポートしようとするまで

-build 
-content1 
-content2 
-shared 
-event 
-popup 
package.json 
gulpfile.babel.js 
manifest.json 

すべてが正常に動作します。共有フォルダにはwebpack設定がありません。私はエラーが発生します:予期しないトークン。このファイルタイプを処理するには、適切なローダーが必要な場合があります。

共有フォルダから適切なコンテンツスクリプトにアセットをコンパイルするにはどうすればよいですか?エイリアスを試しましたが、動作しませんでした。

alias: { 
    shared: path.normalize('../../../../../../shared') 
} 

答えて

0

私は脳のおならを持っていました...ディレクトリのための新しいローダーを作るために必要でした。 content1/webpack.config.jsおよびcontent2/webpack.config.jsファイルで...

{ 
    test: /\.(jsx|js)?$/, 
    loader: 'babel', 
    exclude: /(node_modules)/, 
    include: path.join(__dirname, '../shared'), 
    query: { 
     presets: ['es2015', 'react'] 
    } 
    }, 
関連する問題