如何配置Webpack将特定文件输出到/dist/src/js，样式文件输出到/dist/src/styles？

我之前刚好处理过类似的需求，给你整理了一套清晰的配置方案，能完美实现把特定JS文件输出到/dist/src/js、样式文件输出到/dist/src/styles的效果：

核心思路 #

Webpack的输出规则主要靠output字段控制JS文件，样式文件则需要借助mini-css-extract-plugin插件来提取并指定输出路径，下面是完整的配置示例和细节解释：

1. 先安装必要的依赖 #

样式文件提取需要用到mini-css-extract-plugin，先在项目里安装它：

npm install mini-css-extract-plugin --save-dev

2. 完整的Webpack配置文件 #

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 配置入口文件，如果有特定需要输出的JS，在这里定义
  entry: {
    main: './src/main.js',
    // 比如这个utils.js就是你要输出到目标目录的特定文件
    utils: './src/utils.js'
  },
  output: {
    // 把JS文件的基础输出目录设为/dist/src/js
    path: path.resolve(__dirname, 'dist/src/js'),
    // 输出的JS文件名，[name]会对应entry里的键名（比如main.js、utils.js）
    filename: '[name].js',
    clean: true // 可选：每次构建前清空输出目录，避免冗余文件
  },
  module: {
    rules: [
      // 处理样式文件（css/scss/sass都适用）
      {
        test: /\.(css|scss|sass)$/,
        use: [
          // 用MiniCssExtractPlugin的loader替换style-loader，提取CSS为单独文件
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析CSS文件
          'sass-loader' // 如果你用SCSS/SASS预处理器就加这个，不用可以删掉
        ]
      }
    ]
  },
  plugins: [
    // 配置样式文件的输出路径
    new MiniCssExtractPlugin({
      // 这里的路径是相对于output.path（也就是dist/src/js）的相对路径
      // ../../往上跳两级，就能定位到dist/src/styles目录
      filename: '../../styles/[name].css'
    })
  ]
};

3. 针对"特定文件"的灵活调整 #

如果只有部分JS文件需要输出到/dist/src/js，其他JS要放到别的目录，可以通过output.filename的函数来动态判断：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: (pathData) => {
    // 只把entry里的utils和main这两个特定文件输出到src/js
    const targetFiles = ['utils', 'main'];
    if (targetFiles.includes(pathData.chunk.name)) {
      return 'src/js/[name].js';
    }
    // 其他JS文件输出到默认的js目录
    return 'js/[name].js';
  }
}

这样就能精准控制特定文件的输出路径了，样式文件的输出逻辑保持不变即可。

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