WebPack 条目是否必须是 JavaScript 文件答案

【问题标题】：Does the WebPack entry have to be a JavaScript FileWebPack 条目是否必须是 JavaScript 文件
【发布时间】：2017-11-04 19:17:00
【问题描述】：

当您使用 WebPack 时，您通常必须为 .js 文件设置一个入口点。这是一个要求吗？我有两种情况：

我想将 .scss 转换为 .css 文件。
我想使用 imagemin 缩小图像。

我没有或不需要任何 JavaScript。如何使用 WebPack 实现这一点？这甚至是正确的工具吗？我过去曾使用 Gulp 完成此操作。 WebPack 是否仅在您 require JavaScript 文件中的图像和 CSS 时才有意义？

【问题讨论】：

标签： webpack sass webpack-2 imagemin

【解决方案1】：

对于 .scss 到 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,
                },
            }
        }
        ]
    }
}

【讨论】：

【解决方案2】：

如果你只是在做 CSS 的东西，Webpack 真的不是合适的工具。虽然我相信它可以做到。你需要来自 npm 的 'css-loader'、'style-loader'、'sass-loader' 和 'node-sass' 包。检查加载器的文档以了解如何将它们添加到您的 webpack.config.js

我的建议是创建一个名为 index.js 的 JavaScript 文件并将其设置为您的入口点。然后需要该文件中的样式表。

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

然后您可以查看配置 extract-text-webpack-plugin，它将为您编译为 .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
    ]
};

【讨论】：

我一直在查看文档，但没有找到方法。
@MuhammadRehanSaeed 我添加了一个潜在的解决方案，但它似乎有点啰嗦，我相信像 codekit/koala 这样的基本 sass 编译器会为你做得更好。