Webpack技术问询：如何将文件内容赋值给指定变量？以及如何直接将文件内容传入方法且不生成额外变量？

针对你的两个问题，我来一步步拆解解决方案：

1. Webpack能否将文件内容赋值给指定变量？ #

完全可以，通过自定义loader或者内置的模块类型（比如asset/source）就能实现——你当前的自定义loader其实已经在做这件事了：把SCSS编译后的CSS内容导出给scss变量。

2. 如何避免生成额外变量，直接将内容嵌入到console.log中？ #

你的核心需求是让Webpack跳过中间变量，直接把文件内容作为字面量插入到调用位置。这里分两种场景给出最优方案：

场景一：生产环境（推荐） #

Webpack在mode: 'production'下会自动开启常量折叠和代码优化。只要你的自定义loader导出的是一个静态常量（就像你现在返回的export default \n${result.css}\n``），Webpack会自动把import scss from './styles.scss'; console.log(scss);编译成你想要的console.log('...');，完全不会生成中间变量。

你可以试试把Webpack配置的mode设为production，重新编译就能看到效果。

场景二：开发环境或需要强制内联 #

如果需要在开发模式下也实现这个效果，或者想强制跳过优化步骤，有两种方法：

方法A：用DefinePlugin预注入内容

这种方式会在Webpack构建阶段就读取并编译SCSS文件，把内容作为全局常量注入到代码中，完全没有模块冗余：

首先修改webpack.config.js：

const webpack = require('webpack');
const sass = require('sass');
const path = require('path');

// 提前编译SCSS文件
const scssPath = path.resolve(__dirname, './styles.scss');
const compiledCss = sass.compile(scssPath).css;

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      // 注意要用JSON.stringify转义字符串
      COMPILED_CSS: JSON.stringify(compiledCss)
    })
  ]
};

然后在index.js里直接使用：

console.log(COMPILED_CSS);

这样Webpack会直接把CSS字符串内联到console.log里，没有任何中间变量。

⚠️ 注意：这种方法的缺点是SCSS文件的修改不会触发热更新，因为内容是在构建阶段预读取的，不是通过loader实时处理的。

方法B：改进自定义loader并配置Webpack优化

如果你需要保留loader的实时处理能力（比如热更新），可以调整loader的输出格式，并开启Webpack的强制优化：

首先修改你的css-loader.js，返回CommonJS风格的常量导出：

const sass = require('sass');
module.exports = function(source) {
  const result = sass.compile(this.resourcePath);
  // 直接导出字符串常量，方便Webpack做常量折叠
  return `module.exports = ${JSON.stringify(result.css)}`;
};

然后在webpack.config.js里开启优化：

module.exports = {
  mode: 'development',
  optimization: {
    // 强制开启模块合并和常量折叠
    concatenateModules: true,
    minimize: true,
    minimizer: [
      // 使用TerserPlugin来做代码压缩和内联
      new require('terser-webpack-plugin')({
        terserOptions: {
          compress: {
            passes: 2, // 多轮压缩确保常量完全内联
          }
        }
      })
    ]
  },
  module: {
    rules: [
      { test: /\.scss$/, use: ['./css-loader.js'] }
    ]
  }
};

这样即使在开发模式下，Webpack也会把import scss from './styles.scss'; console.log(scss);编译成console.log('...');。

关于require()冗余代码的问题 #

你提到用require()会生成冗余代码，其实是因为Webpack默认会给模块加上包裹代码。如果用上面的方法A（DefinePlugin）或者生产模式下的自动优化，就能完全避免冗余。

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