builder loader refactors

lib/builder/builder.js

@@ -9,15 +9,13 @@ const { join, resolve, basename, extname, dirname } = require('path')
 const MFS = require('memory-fs')
 const webpackDevMiddleware = require('webpack-dev-middleware')
 const webpackHotMiddleware = require('webpack-hot-middleware')
-const { r, wp, wChunk, createRoutes, sequence, relativeTo, waitFor, rmCache } = require('../common/utils')
 const Debug = require('debug')
 const Glob = require('glob')
+const { r, wp, wChunk, createRoutes, sequence, relativeTo, waitFor, rmCache } = require('../common/utils')
+const { Options } = require('../common')
 const clientWebpackConfig = require('./webpack/client.config.js')
 const serverWebpackConfig = require('./webpack/server.config.js')
 const dllWebpackConfig = require('./webpack/dll.config.js')
-const vueLoaderConfig = require('./webpack/vue-loader.config')
-const styleLoader = require('./webpack/style-loader')
-const { Options } = require('../common')
 
 const debug = Debug('nuxt:build')
 debug.color = 2 // Force green color
@@ -44,10 +42,6 @@ module.exports = class Builder {
     // Helper to resolve build paths
     this.relativeToBuild = (...args) => relativeTo(this.options.buildDir, ...args)
 
-    // Bind styleLoader and vueLoader
-    this.styleLoader = styleLoader.bind(this)
-    this.vueLoader = vueLoaderConfig.bind(this)
-
     this._buildStatus = STATUS.INITIAL
 
     // Stop watching on nuxt.close()

lib/builder/webpack/base.config.js

@@ -2,6 +2,8 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const { cloneDeep } = require('lodash')
 const { join, resolve } = require('path')
 const { isUrl, urlJoin } = require('../../common/utils')
+const vueLoader = require('./vue-loader')
+const styleLoader = require('./style-loader')
 const TimeFixPlugin = require('./plugins/timefix')
 const WarnFixPlugin = require('./plugins/warnfix')
 
@@ -56,7 +58,7 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
         {
           test: /\.vue$/,
           loader: 'vue-loader',
-          options: this.vueLoader({ isServer })
+          options: vueLoader.call(this, { isServer })
         },
         {
           test: /\.js$/,
@@ -64,11 +66,11 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
           exclude: /node_modules/,
           options: this.getBabelOptions({ isServer })
         },
-        { test: /\.css$/, use: this.styleLoader('css') },
+        { test: /\.css$/, use: styleLoader.call(this, 'css') },
-        { test: /\.less$/, use: this.styleLoader('less', 'less-loader') },
+        { test: /\.less$/, use: styleLoader.call(this, 'less', 'less-loader') },
-        { test: /\.sass$/, use: this.styleLoader('sass', {loader: 'sass-loader', options: { indentedSyntax: true }}) },
+        { test: /\.sass$/, use: styleLoader.call(this, 'sass', {loader: 'sass-loader', options: { indentedSyntax: true }}) },
-        { test: /\.scss$/, use: this.styleLoader('scss', 'sass-loader') },
+        { test: /\.scss$/, use: styleLoader.call(this, 'scss', 'sass-loader') },
-        { test: /\.styl(us)?$/, use: this.styleLoader('stylus', 'stylus-loader') },
+        { test: /\.styl(us)?$/, use: styleLoader.call(this, 'stylus', 'stylus-loader') },
         {
           test: /\.(png|jpe?g|gif|svg)$/,
           loader: 'url-loader',

lib/builder/webpack/postcss.js

@@ -1,8 +1,8 @@
 const { existsSync } = require('fs')
 const { resolve } = require('path')
+const { cloneDeep } = require('lodash')
 const debug = require('debug')('nuxt:postcss')
 const { isPureObject } = require('../../common/utils')
-const { cloneDeep } = require('lodash')
 
 module.exports = function postcssConfig() {
   let config = cloneDeep(this.options.build.postcss)

lib/builder/webpack/vue-loader.js

@@ -1,4 +1,5 @@
 const postcssConfig = require('./postcss')
+const styleLoader = require('./style-loader')
 
 module.exports = function vueLoader({ isServer }) {
   // https://vue-loader.vuejs.org/en
@@ -13,12 +14,12 @@ module.exports = function vueLoader({ isServer }) {
         options: this.getBabelOptions({ isServer })
       },
       // Note: do not nest the `postcss` option under `loaders`
-      'css': this.styleLoader('css', [], true),
+      'css': styleLoader.call(this, 'css', [], true),
-      'less': this.styleLoader('less', 'less-loader', true),
+      'less': styleLoader.call(this, 'less', 'less-loader', true),
-      'scss': this.styleLoader('scss', 'sass-loader', true),
+      'scss': styleLoader.call(this, 'scss', 'sass-loader', true),
-      'sass': this.styleLoader('sass', {loader: 'sass-loader', options: { indentedSyntax: true }}, true),
+      'sass': styleLoader.call(this, 'sass', {loader: 'sass-loader', options: { indentedSyntax: true }}, true),
-      'stylus': this.styleLoader('stylus', 'stylus-loader', true),
+      'stylus': styleLoader.call(this, 'stylus', 'stylus-loader', true),
-      'styl': this.styleLoader('stylus', 'stylus-loader', true)
+      'styl': styleLoader.call(this, 'stylus', 'stylus-loader', true)
     },
     template: {
       doctype: 'html' // For pug, see https://github.com/vuejs/vue-loader/issues/55