webpack：複数のファイルタイプ出力を持つ複数の入力

Question

"es6 standard" jsファイルを1つのエントリポイントを使用してネイティブjにコンパイルできました。複数のエントリを使用して複数のファイルをコンパイルすることもできました。例：私は

modules: { 
    loaders: [ 
     { tests: '/\.(css|scss)$/', loader: 'css-loader|style-loader'} 
    ] 
} 

...もう少しで、他のファイルをコンパイルしたモジュール/プラグインを使用しての概念を理解している

webpack.config.js

module.exports = { 
    entry: { 
     front: "./static/src/js/Front.js", 
     account: "./static/src/js/Account.js" 
    }, 
    output: { 
     path: "./static/dist", 
     filename: "[name]-bundle.js" 
    } 
}; 

これらのソリューションは、私のstyles (scss, sass, css)を含むJavaScriptのみにファイルをコンパイルします。

2つ（または複数）の異なるエントリファイルを用意していますが、それぞれが独自のファイルタイプ（出力ファイルは.jsではなく）を生成するソリューションを探しています。私は複数の設定モジュールを持っていても構いません。ありがとう...

Answer 1

コードがSCSSになっているので、SCSSローダーとCSSローダーが必要です。また、extract-text-webpack-pluginが必要です。これは、バンドル内のテキストを別のファイルに持ち出すためのものです。

また、画像とフォントファイルをバンドルから移動したいと思うので、イメージ/フォントの抽出テストを追加しました。インストールする必要があるものは、file-loaderです。私はあなたからスタイルシートを取り外すについて話している、私はあなたがすでに複数のファイルにソースコードを抽出する方法を持って見たものから、私はあなたが求めているのかわからないよそれは

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

const extractCss= new ExtractText({ filename: 'styles/vendors.css' }); 
const extractSass = new ExtractText({ filename: 'styles/site.css' }); 

module.exports = (env) => { 
    return { 
    entry: { 
     main: path.resolve(__dirname, '../', 'src', 'Front.js'), 
    }, 
    output: { 
     path: path.resolve(__dirname, '../', 'dist'), 
     filename: 'js/[name]-bundle.js', 
    }, 
    module: { 
     rules: [ 
     { test: /\.css/, use: extractCss.extract(['css-loader']) }, 
     { test: /\.scss/, exclude: /node_modules/, use: extractSass.extract(['css-loader', 'sass-loader']) }, 

     { test: /\.(png|jpg)$/, exclude: /node_modules/, use: 'file-loader?outputPath=images/&publicPath=../'}, 
     { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: 'file-loader?outputPath=fonts/&publicPath=../'}, 
     ] 
    }, 
    resolve: { 
     modules: ['node_modules'], 
    }, 
    plugins: [ 
     extractCss, 
     extractSass, 
    ] 
    } 
} 

PS: I am in a hurry out, so I just cooked this up fast, when I come back I will review, in case you find any bugs, just comment below.