Backslashes on Windows (again)

• Laravel Mix Version: 1.7.2
• Node Version (node -v): 8.9.1
• NPM Version (npm -v): 5.5.1
• OS: Windows 10 x64

Description:

Trying to use html-webpack-plugin as well as trying to use Webpack lazy loading both have an issue on Windows because the paths to the JS and CSS files have backslashes in them instead of forward slashes. While Chrome transparently corrects them to forward slashes, other browsers (Firefox, for example), do not. (The reason it is an issue for lazy loading is that the manifest.js file contains the backslashed paths too.)

The fix for this is simple and was already done once in #323 (for JS files only), but I wanted to find out if there was a reason that it was removed (or whether it was just accidental) before I submit a new PR to put it back.

The fix for JS files is just adding .replace(/\\/g, '/') at the end of the line here, here, and here.

The fix for CSS files is adding the same thing at the end of the line here.

Steps To Reproduce:

(Note: This is a non-Laravel project example, but in a Laravel project the same issue occurs.)

Folder structure:

- src
\- html
  \- index.html
\- js
  \- main.js
  \- ... // doesn't matter
\- styles
  \- app.scss

webpack.mix.js

const { mix } = require('laravel-mix');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin');
const path = require('path');

mix
	.setPublicPath('build')
	.webpackConfig({
		plugins: [
			new HtmlWebpackPlugin({
				inject: true,
				template: 'src/html/index.html',
			}),
			new InlineChunkWebpackPlugin({
				// Adding `path.normalize` here should not be necessary,
				// but it is because of this backslash issue.
				inlineChunks: [path.normalize('/js/manifest')]
			})
		],
	})
	.js('src/js/main.js', 'js')
	.extract([
		'axios',
		'bootstrap-sass',
		'jquery',
		'vue',
		'vue-router',
		'vuex',
	], 'js/vendor')
	.sass('src/styles/app.scss', 'css')
	.version();

The actual contents of the JS and CSS files don’t actually matter.

[tpraxl]

Thanks for your suggestions. I applied them, which reduced the amount of fails. 👍

However, not all failing tests are fixed and I would suggest to keep this discussion clean. You are very welcome to contribute to my fork by posting pull requests to https://github.com/tpraxl/laravel-mix/tree/feature/automated-testing-for-pull-requests

I also enabled issues, should we need to discuss things further.

When all issues are resolved, I’ll post the PR to JeffreyWay/laravel-mix and hope that it will be merged 😃

[kohenkatz]

test/WebpackConfig.js

 test('Autoprefixer should always be applied after all other postcss plugins', t => {
     mix.sass('resources/assets/sass/sass.scss', 'public/css')
        .options({
            postCss: [
               require('postcss-custom-properties')
            ]
        });

+    let filePath = path.normalize('/resources/assets/sass/sass.scss');
+
     let plugins = new WebpackConfig()
         .build()
-        .module.rules.find(rule => rule.test.toString().includes('/resources/assets/sass/sass.scss'))
+        .module.rules.find(rule => rule.test.toString().includes(filePath))
         .use.find(loader => loader.loader == 'postcss-loader')
         .options.plugins.map(plugin => plugin().postcssPlugin);

     t.deepEqual(['postcss-custom-properties', 'autoprefixer'], plugins);
 });