是否進入的WebPack必須是一個JavaScript文件

當您使用的WebPack，您通常需要一個入口點設置爲一個.js文件。這是一個要求嗎？我有兩個方案：是否進入的WebPack必須是一個JavaScript文件

我想一個.scss轉換爲.css文件。
我想用imagemin縮小圖像。

我沒有或需要任何JavaScript。如何使用WebPack實現這一點？這甚至是正確的工具嗎？我以前用Gulp做過這個。 WebPack只有在您的JavaScript文件中使用require圖片和CSS時纔有意義嗎？

2017-06-03 Muhammad Rehan Saeed

的WebPack還真是不正確的工具，如果你只是在做CSS的東西。儘管我相信它可以完成。你需要npm的'css-loader'，'style-loader'，'sass-loader'和'node-sass'包。檢查文檔的裝載機，看看如何將它們添加到您的webpack.config.js

我的建議是建立一個JavaScript文件名爲index.js並設置爲您的入口點。然後需要該文件中的樣式表。

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

然後你可以看一下配置提取物，文本的WebPack-插件，將編譯爲.css文件給你。

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 
    ] 
};

來源

2017-06-03 14:18:50

我一直在尋找的文檔，但還沒有發現一種方式來做到這一點。 –

@MuhammadRehanSaeed我添加了一個潛在的解決方案，但它似乎有點長篇大論，我相信一個基本的青菜之類的編譯codekit /考拉會做這項工作更好地爲您服務。 –

對於.scss to sass使用sass-loader和css-loader。和縮小圖像使用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, 
       }, 
      } 
     } 
     ] 
    } 
}

來源

2017-06-04 23:24:23 owaishanif786

是否進入的WebPack必須是一個JavaScript文件

回答

相關問題