Question

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

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

我没有或不需要任何JavaScript。如何使用WebPack实现这一目标？这甚至是正确的工具吗？我过去使用Gulp做过这个。只有从JavaScript文件中SELECT * FROM dbo.Table图像和CSS时，WebPack才有意义吗？

Answer 1

如果你只是做CSS的话，Webpack真的不是正确的工具。虽然我相信它可以做到。您需要＆＃39; css-loader＆＃39;，＆＃39; style-loader＆＃39;，＃sass-loader＆＃39;和＆＃39; node-sass＆＃39;来自npm的包裹。查看加载器的文档，了解如何将它们添加到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-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,
                },
            }
        }
        ]
    }
}

WebPack条目是否必须是JavaScript文件

2 个答案: