I have 2 different builds for my laravel-mix. Target node and web. Here is what how they look like:
if (process.env.npm_config_section === 'server') {
mix.js('resources/js/app-server.js', 'public/js')
.webpackConfig({
target: 'node',
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
})
],
})
.mergeManifest()
.version();
} else if (process.env.npm_config_section === 'client') {
mix.js('resources/js/app-client.js', 'public/js')
.webpackConfig({
target: 'web',
output: {
chunkFilename: 'js/chunks/[name].js?id=[chunkhash]',
publicPath: '/',
},
})
.mergeManifest()
.version();
}
mix.sass('resources/sass/app.scss', 'public/css')
- For 'web' - it separates the chunks
- For 'node' - it only gives 1 file
However, I get an error for 'node' which is fair enough - we don't have window in node target:
return window && document && document.all && !window.atob
ReferenceError: window is not defined
Looking at the compiled file this is where it is crashing which made me think it's style-loader related.
var isOldIE = memoize(function () {
// Test for IE <= 9 as proposed by Browserhacks
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
// Tests for existence of standard globals is to allow style-loader
// to operate correctly into non-standard environments
// @see https://github.com/webpack-contrib/style-loader/issues/177
return window && document && document.all && !window.atob;
});
What can I do so that 'node' doesn't use style-loader? How can I change this in laravel-mix?
This SO answer says use MiniCssExtractPlugin
This SO answer says use isomorphic-style-loader or node-style-loader
...but to change the style-loader in Laravel-mix based on target?
