SCSSをCSSにコンパイルし、ES6からES5を同時にトランスリングする

Question

したがって、style.scssというSCSSファイルがあります。そして、私はscript.jsと呼ばれるES6ファイルを持っています。これらのファイルはどちらも./src/ディレクトリにあります。

Webpackを使用してstyle.scssとし、それをCSSに変換して./dist/という名前のフォルダに貼り付けます。ファイル名はstyle.cssです。私はそれを実際に起こすことができます。

また、Webpackはscript.jsを使い、ES5に移植し、同じ./dist/フォルダにscript.jsというファイルを入れたいと思っています。私もそれを実現させることができます。

私ができないことは、同時に起こることです。 Webpackがこれでもできることは何ですか？この例では、すべてのスタイルを自分のJSに入れたいとは思っていません。標準のWebサイトのような別々のファイルに保管したいと思っています。

私が持っている最も近いがこれです：

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

module.exports = { 
    entry: { 
     script: './src/script.js', 
     style: './src/style.scss' 
    }, 
    output: { 
     path: './dist', 
     filename: '[name].js' 
    }, 
    module: { 
     rules: [ 
     { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: ['css-loader', 'sass-loader'] 
      }) 
     } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('style.css') 
    ] } 

しかし、これは私にscript.jsファイル、style.cssファイルも混乱ですstyle.jsファイルを提供します。

提案がありますか？

Answer 1

CSSのエントリポイントを別に作成する必要はありません。 script.jsにstyle.scssをインポートすることも、同じエントリに追加することもできます。エントリは配列でもよく、webpackはそれらを同じバンドルに含めることができます。実際にはCSSが追加されないようにCSSが抽出されます。あなたのエントリーは次のようになります：

entry: { 
    script: ['./src/script.js', './src/style.scss'] 
},