Byte order marks included in output file

Bug report

When running on Windows and when the webpack mode=development byte order marks from the source files are copied to the output file. This results in broken Javascript.

This was reported a few years ago here https://github.com/webpack/webpack/issues/2868 and was never resolved.

If the current behavior is a bug, please provide the steps to reproduce.

1. On a Windows 10 machine with node.js installed.
2. Clone this repo https://github.com/Bikeman868/frag/tree/Webpack_issue_2021_06_26
3. From a command prompt in the root directory of the repo type npm install
4. In the command prompt window type npx webpack
5. Look at the generated dist/frag.js file and see that it contains weird characters at the start of each module.

This is a very simple solution with the following Webpack config:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'frag.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'source-map',
  watchOptions: {
    ignored: '**/node_modules'
  }
};

What is the expected behavior?

Byte-order-marks in Windows files are there to indicate whether the file is little-endian or big-endian. These are written into files automatically by most Windows software, and ignored when the file is opened in any application.

Webpack is copying the byte-order-mark bytes from source files into the output file resulting in broken Javascript. It seems to do this only when the webpack mode is ‘development’. I have not seen this when the mode is ‘production’.

Other relevant information: webpack version: 5.38.1 Node.js version: 15.14.0 Operating System: Windows 10 Additional tools: Windows Terminal + WSL + Ubuntu

[Banner-Keith]

I agree that BOM should be removed in development.

[Bikeman868]

Setting up the linter does not fix the problem, it just tells you that the problem exists. This is an improvement, but actually it’s quite easy to see already, the browser refuses to parse the JavaScript and stops at line 1 character 1. I recognized it right away as BOM.

To anyone reading this that wants to know how to fix the problem, you need to open each source file in VS Code, then on the bottom toolbar there is a button that will say “UTF-8 with BOM”. Click this button and choose “Save with encoding” then choose “UTF-8”.