chore: update webpack config

MPComponent · May 20, 2019 · 8edee4d · 8edee4d
1 parent 180b764
commit 8edee4d
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 211 deletions.
diff --git a/build/dev-server.js b/build/dev-server.js
@@ -1,28 +1,28 @@
-require('./check-versions')()
+require("./check-versions")();
 
-var config = require('../config')
+var config = require("../config");
 if (!process.env.NODE_ENV) {
-  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV);
 }
 
 // var opn = require('opn')
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var proxyMiddleware = require('http-proxy-middleware')
-var portfinder = require('portfinder')
-var webpackConfig = require('./webpack.dev.conf')
+var path = require("path");
+var express = require("express");
+var webpack = require("webpack");
+var proxyMiddleware = require("http-proxy-middleware");
+var portfinder = require("portfinder");
+var webpackConfig = require("./webpack.dev.conf");
 
 // default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
+var port = process.env.PORT || config.dev.port;
 // automatically open browser, if not set will be false
-var autoOpenBrowser = !!config.dev.autoOpenBrowser
+var autoOpenBrowser = !!config.dev.autoOpenBrowser;
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
+var proxyTable = config.dev.proxyTable;
 
-var app = express()
-var compiler = webpack(webpackConfig)
+var app = express();
+var compiler = webpack(webpackConfig);
 
 // var devMiddleware = require('webpack-dev-middleware')(compiler, {
 //   publicPath: webpackConfig.output.publicPath,
@@ -42,16 +42,16 @@ var compiler = webpack(webpackConfig)
 // })
 
 // proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
+Object.keys(proxyTable).forEach(function(context) {
+  var options = proxyTable[context];
+  if (typeof options === "string") {
+    options = { target: options };
   }
-  app.use(proxyMiddleware(options.filter || context, options))
-})
+  app.use(proxyMiddleware(options.filter || context, options));
+});
 
 // handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
+app.use(require("connect-history-api-fallback")());
 
 // serve webpack bundle output
 // app.use(devMiddleware)
@@ -61,15 +61,18 @@ app.use(require('connect-history-api-fallback')())
 // app.use(hotMiddleware)
 
 // serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
+var staticPath = path.posix.join(
+  config.dev.assetsPublicPath,
+  config.dev.assetsSubDirectory
+);
+app.use(staticPath, express.static("./static"));
 
 // var uri = 'http://localhost:' + port
 
-var _resolve
+var _resolve;
 var readyPromise = new Promise(resolve => {
-  _resolve = resolve
-})
+  _resolve = resolve;
+});
 
 // console.log('> Starting dev server...')
 // devMiddleware.waitUntilValid(() => {
@@ -82,25 +85,27 @@ var readyPromise = new Promise(resolve => {
 // })
 
 module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = port
-  portfinder.getPortPromise()
-  .then(newPort => {
+  portfinder.basePort = port;
+  portfinder
+    .getPortPromise()
+    .then(newPort => {
       if (port !== newPort) {
-        console.log(`${port}端口被占用，开启新端口${newPort}`)
+        console.log(`${port}端口被占用，开启新端口${newPort}`);
       }
-      var server = app.listen(newPort, 'localhost')
+      var server = app.listen(newPort, "localhost");
       // for 小程序的文件保存机制
-      require('webpack-dev-middleware-hard-disk')(compiler, {
+      require("webpack-dev-middleware-hard-disk")(compiler, {
         publicPath: webpackConfig.output.publicPath,
         quiet: true
-      })
+      });
       resolve({
         ready: readyPromise,
         close: () => {
-          server.close()
+          server.close();
         }
-      })
-  }).catch(error => {
-    console.log('没有找到空闲端口，请打开任务管理器杀死进程端口再试', error)
-  })
-})
+      });
+    })
+    .catch(error => {
+      console.log("没有找到空闲端口，请打开任务管理器杀死进程端口再试", error);
+    });
+});
diff --git a/build/utils.js b/build/utils.js
@@ -1,61 +1,62 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var path = require("path");
+var config = require("../config");
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
-exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
-  return path.posix.join(assetsSubDirectory, _path)
-}
+exports.assetsPath = function(_path) {
+  var assetsSubDirectory =
+    process.env.NODE_ENV === "production"
+      ? config.build.assetsSubDirectory
+      : config.dev.assetsSubDirectory;
+  return path.posix.join(assetsSubDirectory, _path);
+};
 
-exports.cssLoaders = function (options) {
-  options = options || {}
+exports.cssLoaders = function(options) {
+  options = options || {};
 
   var cssLoader = {
-    loader: 'css-loader',
+    loader: "css-loader",
     options: {
-      minimize: process.env.NODE_ENV === 'production',
+      minimize: process.env.NODE_ENV === "production",
       sourceMap: options.sourceMap
     }
-  }
+  };
 
   var postcssLoader = {
-    loader: 'postcss-loader',
+    loader: "postcss-loader",
     options: {
       sourceMap: true
     }
-  }
+  };
 
   var px2rpxLoader = {
-    loader: 'px2rpx-loader',
+    loader: "px2rpx-loader",
     options: {
       baseDpr: 1,
       rpxUnit: 0.5
     }
-  }
+  };
 
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    var loaders = [cssLoader, px2rpxLoader, postcssLoader]
+  function generateLoaders(loader, loaderOptions) {
+    var loaders = [cssLoader, px2rpxLoader, postcssLoader];
     if (loader) {
       loaders.push({
-        loader: loader + '-loader',
+        loader: loader + "-loader",
         options: Object.assign({}, loaderOptions, {
           sourceMap: options.sourceMap
         })
-      })
+      });
     }
 
     // Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {
       return ExtractTextPlugin.extract({
         use: loaders,
-        fallback: 'vue-style-loader'
-      })
+        fallback: "vue-style-loader"
+      });
     } else {
-      return ['vue-style-loader'].concat(loaders)
+      return ["vue-style-loader"].concat(loaders);
     }
   }
 
@@ -64,24 +65,24 @@ exports.cssLoaders = function (options) {
     css: generateLoaders(),
     wxss: generateLoaders(),
     postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
+    less: generateLoaders("less"),
+    sass: generateLoaders("sass", { indentedSyntax: true }),
+    scss: generateLoaders("sass"),
+    stylus: generateLoaders("stylus"),
+    styl: generateLoaders("stylus")
+  };
+};
 
 // Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
+exports.styleLoaders = function(options) {
+  var output = [];
+  var loaders = exports.cssLoaders(options);
   for (var extension in loaders) {
-    var loader = loaders[extension]
+    var loader = loaders[extension];
     output.push({
-      test: new RegExp('\\.' + extension + '$'),
+      test: new RegExp("\\." + extension + "$"),
       use: loader
-    })
+    });
   }
-  return output
-}
+  return output;
+};
diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
@@ -1,8 +1,8 @@
-var utils = require('./utils')
-var config = require('../config')
+var utils = require("./utils");
+var config = require("../config");
 // var isProduction = process.env.NODE_ENV === 'production'
 // for mp
-var isProduction = true
+var isProduction = true;
 
 module.exports = {
   loaders: utils.cssLoaders({
@@ -12,9 +12,9 @@ module.exports = {
     extract: isProduction
   }),
   transformToRequire: {
-    video: 'src',
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
+    video: "src",
+    source: "src",
+    img: "src",
+    image: "xlink:href"
   }
-}
+};