Updated JavaScript and TypeScript components to support Webpack 5

laravel-mix · Jun 24, 2020 · 6e2e9d8 · 6e2e9d8
1 parent 06fc851
commit 6e2e9d8
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 94 deletions.
diff --git a/src/components/JavaScript.js b/src/components/JavaScript.js
@@ -12,7 +12,7 @@ class JavaScript {
     name() {
         let name = this.constructor.name.toLowerCase();
 
-        return name === 'javascript' ? ['js'] : name;
+        return name === 'javascript' ? 'js' : name;
     }
 
     /**
@@ -68,91 +68,6 @@ class JavaScript {
             }
         ]);
     }
-
-    /**
-     * Override the generated webpack configuration.
-     *
-     * @param {Object} webpackConfig
-     */
-    webpackConfig(webpackConfig) {
-        this.updateCssLoaders(webpackConfig);
-    }
-
-    /**
-     * Update all preprocessor loaders to support CSS extraction.
-     *
-     * @param {Object} webpackConfig
-     */
-    updateCssLoaders(webpackConfig) {
-        // Basic CSS and PostCSS
-        this.updateCssLoader('css', webpackConfig, rule => {
-            rule.loaders.find(
-                loader => loader.loader === 'postcss-loader'
-            ).options = this.postCssOptions();
-        });
-
-        // LESS
-        this.updateCssLoader('less', webpackConfig);
-
-        // SASS
-        let sassCallback = rule => this.sassCallback(rule);
-
-        // SCSS
-        this.updateCssLoader('scss', webpackConfig, sassCallback);
-
-        // SASS
-        this.updateCssLoader('sass', webpackConfig, sassCallback);
-
-        // STYLUS
-        this.updateCssLoader('styl', webpackConfig);
-    }
-
-    /**
-     * Update a sass loader.
-     *
-     * @param {Object} rule
-     */
-    sassCallback(rule) {
-        if (Mix.seesNpmPackage('sass')) {
-            rule.loaders.find(
-                loader => loader.loader === 'sass-loader'
-            ).options.implementation = require('sass');
-        }
-    }
-
-    /**
-     * Update a single CSS loader.
-     *
-     * @param {string} loader
-     * @param {Object} webpackConfig
-     * @param {Function} callback
-     */
-    updateCssLoader(loader, webpackConfig, callback) {
-        let rule = webpackConfig.module.rules.find(rule => {
-            return rule.test instanceof RegExp && rule.test.test('.' + loader);
-        });
-
-        callback && callback(rule);
-    }
-
-    /**
-     * Fetch the appropriate postcss plugins for the compile.
-     */
-    postCssOptions() {
-        if (Mix.components.get('postCss')) {
-            return {
-                plugins: Mix.components.get('postCss').details[0].postCssPlugins
-            };
-        }
-
-        // If the user has a postcss.config.js file in their project root,
-        // postcss-loader will automatically read and fetch the plugins.
-        if (File.exists(Mix.paths.root('postcss.config.js'))) {
-            return {};
-        }
-
-        return { plugins: Config.postCss };
-    }
 }
 
 module.exports = JavaScript;
diff --git a/src/components/TypeScript.js b/src/components/TypeScript.js
@@ -54,8 +54,6 @@ class TypeScript extends JavaScript {
      * @param {Object} config
      */
     webpackConfig(config) {
-        super.webpackConfig(config);
-
         config.resolve.extensions.push('.ts', '.tsx');
         config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
     }

diff --git a/test/features/extraction.js b/test/features/extraction.js
@@ -1,7 +1,7 @@
 import mix from './helpers/setup';
 
 test.serial.cb('JS compilation with vendor extraction config', t => {
-    mix.js(
+    mix.vue(
         'test/fixtures/fake-app/resources/assets/extract/app.js',
         'js'
     ).extract(['vue'], 'js/libraries.js');
@@ -40,7 +40,7 @@ test.serial.cb(
 test.serial.cb(
     'JS compilation with vendor extraction with default config',
     t => {
-        mix.js(
+        mix.vue(
             'test/fixtures/fake-app/resources/assets/extract/app.js',
             'js'
         ).extract(['vue']);
@@ -60,7 +60,7 @@ test.serial.cb(
 );
 
 test.serial.cb('JS compilation with total vendor extraction', t => {
-    mix.js(
+    mix.vue(
         'test/fixtures/fake-app/resources/assets/extract/app.js',
         'js'
     ).extract();

diff --git a/test/features/mix.js b/test/features/mix.js
@@ -45,7 +45,7 @@ test.serial.cb('the kitchen sink', t => {
 });
 
 test.serial.cb('async chunk splitting works', t => {
-    mix.js('test/fixtures/fake-app/resources/assets/extract/app.js', 'js')
+    mix.vue('test/fixtures/fake-app/resources/assets/extract/app.js', 'js')
         .extract(['vue', 'lodash', 'core-js'])
         .options({
             babelConfig: {
@@ -70,7 +70,7 @@ test.serial.cb('async chunk splitting works', t => {
 });
 
 test.serial.cb('multiple extractions work', t => {
-    mix.js('test/fixtures/fake-app/resources/assets/extract/app.js', 'js')
+    mix.vue('test/fixtures/fake-app/resources/assets/extract/app.js', 'js')
         .extract(['vue', 'lodash'], 'js/vendor-vue-lodash.js')
         .extract(['core-js'], 'js/vendor-core-js.js')
         .options({

diff --git a/test/features/vue.js b/test/features/vue.js
@@ -286,7 +286,7 @@ test.serial.cb.only('it supports global Vue styles for sass', t => {
         less: ['test/fixtures/fake-app/resources/assets/less/global.less'],
         stylus: ['test/fixtures/fake-app/resources/assets/stylus/global.styl']
     };
-    mix.js(
+    mix.vue(
         'test/fixtures/fake-app/resources/assets/vue/app-with-vue-and-global-styles.js',
         'js/app.js'
     );