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

Question

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

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

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

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