webpack - WebPack 条目是否必须是 JavaScript 文件

Question

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

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

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

Answer 1

如果你只是在做 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
    ]
};

Answer 2

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