WebPackエントリはJavaScriptファイルである必要があります

Question

WebPackを使用する場合、通常はエントリポイントを.jsファイルに設定する必要があります。これは必須条件ですか？私は2つのシナリオを持っています：

1. .scssを.cssファイルに変換したいと思います。
2. 私はイメージを使用してイメージを縮小したいと思います。

JavaScriptはありません。これはWebPackを使用してどのように達成できますか？それは正しいツールですか？私は過去にGulpを使ってこれをやった。 JavaScriptファイルのrequireイメージとCSSを使用すると、WebPackは意味をなさないでしょうか？

Answer 1

Webpackは、CSSを使っているのであれば本当に適切なツールではありません。私は信じてもそれはできます。 npmから 'css-loader'、 'style-loader'、 'sass-loader'、 'node-sass'パッケージが必要になります。ローダーのドキュメントを参照してwebpack.config.jsに追加する方法を確認してください

私の提案は、index.jsというJavaScriptファイルを作成し、それをあなたのエントリーポイントとして設定することです。その後、そのファイルにスタイルシートが必要です。

require('stylesheet.css') 
require('styles.sass') 
//etc 

あなたは、あなたのために.cssファイルにコンパイルされますエキス・テキストのWebPACK - プラグインの設定を見ることができます。

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

const extractSass = new ExtractTextPlugin({ 
    filename: "[name].css" 
}); 

module.exports = { 
    entry: "./index.js", 
    output: "./index.min.js", 
    module: { 
     rules: [{ 
      test: /\.scss$/, 
      use: extractSass.extract({ 
       use: [{ 
        loader: "css-loader" 
       }, { 
        loader: "sass-loader" 
       }] 
      },{ 
      test: /\.sass$/, 
      use: extractSass.extract({ 
       use: [{ 
        loader: "css-loader" 
       }, { 
        loader: "sass-loader" 
       }] 
      }) 
     }] 
    }, 
    plugins: [ 
     extractSass 
    ] 
}; 

Answer 2

sss-loaderとcss-loaderを使用するには.scss to sassを使用します。 イメージを縮小するには、image-webpack-loaderを使用します。 webpack.conig.jsため

全体の構成は、私はドキュメントを見てきたが、それを行う方法を発見していない

module.exports = { 
    entry: './app.js', 
    output: { 
     filename: 'bundle.js' 
    }, 
    module: { 
     rules: [ 
     { 
      test: /\.s[ac]ss$/, 
      use: ExtractTextPlugin.extract({ 
       use: ['css-loader', 'sass-loader'], 

       fallback: 'style-loader' 
      }) 
     }, { 
      loader: 'image-webpack-loader', 
      query: { 
       mozjpeg: { 
        progressive: true, 
       }, 
       gifsicle: { 
        interlaced: false, 
       }, 
       optipng: { 
        optimizationLevel: 4, 
       }, 
       pngquant: { 
        quality: '75-90', 
        speed: 3, 
       }, 
      } 
     } 
     ] 
    } 
}