如何配置Webpack不处理JSF文件，直接从src移至dest目录？

我完全懂你的困扰——Webpack默认会对所有匹配到的JS文件进行编译、优化，哪怕是已经压缩好的JSF文件，这直接导致它无法正常运行。下面给你两个靠谱的解决方案，帮你实现"打包ES6的同时原封不动复制jsf.js"的需求：

这是最省心的方式，这个插件就是专门用来把指定文件/目录原封不动拷贝到输出目录，完全跳过Webpack的编译流程。

1. 先安装插件：

npm install copy-webpack-plugin --save-dev
# 用yarn的话：
yarn add copy-webpack-plugin --dev

2. 在你的webpack.config.js里配置插件：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 保留你原有的entry、output、module等配置...
  plugins: [
    // 其他已有的插件（比如HtmlWebpackPlugin之类的）...
    new CopyWebpackPlugin({
      patterns: [
        {
          from: './src/jsf.js', // 源文件的路径
          to: './jsf.js' // 输出到dest目录下的文件名，和源文件保持一致
        }
      ]
    })
  ]
};

配置完成后，Webpack在打包你的ES6文件时，会自动把src/jsf.js完整复制到dest目录，不会对它做任何修改。

如果你不想引入额外插件，可以通过修改Webpack的loader规则，让它跳过对jsf.js的编译，直接输出文件：

1. 先安装file-loader：

npm install file-loader --save-dev

2. 修改Webpack配置：

module.exports = {
  // 其他原有配置...
  module: {
    rules: [
      // 处理ES6文件的规则，专门排除jsf.js
      {
        test: /\.js$/,
        exclude: /jsf\.js$/, // 让Webpack跳过这个文件的编译
        use: 'babel-loader' // 你用来处理ES6的loader
      },
      // 单独处理jsf.js，直接输出到dest目录
      {
        test: /jsf\.js$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]', // 保持原文件名
              outputPath: './' // 输出到dest根目录
            }
          }
        ]
      }
    ]
  }
};

关键提醒 #

• 一定要检查你的entry配置，确保没有把jsf.js加入入口列表里。不然哪怕用了上面的方案，Webpack还是会把它当作入口文件处理一遍，破坏原有内容。
• 如果还有其他不需要处理的静态文件，copy-webpack-plugin支持批量配置，比如复制整个静态资源目录，非常灵活。

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