无JS小型项目中能否将Sass作为Webpack的入口文件？

别担心，Webpack本质是模块打包工具，不是只能认JavaScript。只要配置好对应的loader和插件，纯HTML+Sass的项目完全可以把Sass设为入口，正常完成打包流程。

下面是具体的配置步骤和注意事项：

1. 安装必要依赖 #

首先得装处理Sass和提取CSS的工具，在项目根目录运行：

npm install webpack webpack-cli sass sass-loader css-loader mini-css-extract-plugin html-webpack-plugin --save-dev

• sass-loader + sass：负责把Sass编译成普通CSS
• css-loader：解析CSS中的依赖（比如@import、资源路径）
• mini-css-extract-plugin：把编译后的CSS提取成独立文件（代替会把CSS注入JS的style-loader，毕竟我们不用JS）
• html-webpack-plugin：自动把打包好的CSS引入到你的HTML模板里，省得手动写<link>标签

2. 配置webpack.config.js #

这是核心，直接给你一个极简可用的配置示例：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 直接把主Sass文件设为入口
  entry: './src/styles/main.scss',
  output: {
    // 这里的filename会被插件覆盖，但Webpack要求必须配置
    filename: 'dummy.js',
    // 打包前清空输出目录
    clean: true,
  },
  module: {
    rules: [
      {
        // 匹配所有.scss/.sass文件
        test: /\.(s[ac]ss)$/i,
        use: [
          // 提取CSS到独立文件
          MiniCssExtractPlugin.loader,
          // 解析CSS依赖
          'css-loader',
          // 编译Sass为CSS
          'sass-loader',
        ],
      },
      // 处理项目中的图片/字体等静态资源（按需添加）
      {
        test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    // 指定输出的CSS文件名（加contenthash做缓存优化）
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].css',
    }),
    // 用你的HTML文件做模板，自动注入打包后的CSS
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  // 关闭无JS代码时的性能提示
  performance: {
    hints: false,
  },
};

3. 关键注意事项 #

• 关于dummy.js：Webpack默认会生成JS输出文件，即使我们不需要。这个文件体积极小（几乎是空的），如果嫌麻烦可以用额外插件删掉，但大部分情况下不用在意。
• 若需要压缩CSS，可安装css-minimizer-webpack-plugin，并在optimization.minimizer中配置，生产环境打包时会自动压缩CSS。
• 确保Sass文件里的资源路径（比如background-image: url('../images/bg.jpg')）正确，css-loader会自动处理路径，配合asset/resource规则把静态资源打包到输出目录。

最后验证 #

在package.json里加个打包脚本：

{
  "scripts": {
    "build": "webpack --mode production"
  }
}

运行npm run build，就能在dist目录看到打包好的CSS和自动注入了CSS的HTML文件，完全符合纯静态项目需求！

内容的提问来源于stack exchange，提问作者Yashu Mittal