是否进入的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文件

回答

相关问题