chore: update vue-loader config

gulpfile.js

@@ -9,7 +9,7 @@ const webpack = require('webpack');
 const webpackConfig = require('./scripts/webpack.conf');
 const i18n = require('./scripts/i18n');
 const string = require('./scripts/string');
-const { IS_DEV } = require('./scripts/utils');
+const { isProd } = require('./scripts/utils');
 const pkg = require('./package.json');
 
 const DIST = 'dist';
@@ -94,7 +94,7 @@ function manifest() {
 function copyFiles() {
   const jsFilter = gulpFilter(['**/*.js'], { restore: true });
   let stream = gulp.src(paths.copy, { base: 'src' });
-  if (!IS_DEV) stream = stream
+  if (isProd) stream = stream
   .pipe(jsFilter)
   .pipe(uglify())
   .pipe(jsFilter.restore);

scripts/utils.js

@@ -1,9 +1,15 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 process.env.NODE_ENV = process.env.NODE_ENV || 'development';
-const IS_DEV = process.env.NODE_ENV === 'development';
-const IS_TEST = process.env.NODE_ENV === 'test';
+const isDev = process.env.NODE_ENV === 'development';
+const isProd = process.env.NODE_ENV === 'production';
+const isTest = process.env.NODE_ENV === 'test';
 
-function styleLoader({ loaders = [], extract = !IS_DEV, minimize = !IS_DEV, fallback = 'style-loader' } = {}) {
+function styleLoader({
+  loaders = [],
+  extract = isProd,
+  minimize = isProd,
+  fallback = 'style-loader',
+} = {}) {
   const cssLoader = {
     loader: 'css-loader',
     options: {
@@ -43,14 +49,15 @@ function merge(obj1, obj2) {
   return obj;
 }
 
-exports.IS_DEV = IS_DEV;
-exports.IS_TEST = IS_TEST;
+exports.isDev = isDev;
+exports.isProd = isProd;
+exports.isTest = isTest;
 exports.styleLoader = styleLoader;
 exports.styleRule = styleRule;
 exports.merge = merge;
 exports.definitions = {
   'process.env': {
     NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-    DEBUG: IS_DEV ? 'true' : 'false', // whether to log message errors
+    DEBUG: isDev ? 'true' : 'false', // whether to log message errors
   },
 };

scripts/vue-loader.conf.js

@@ -1,8 +1,6 @@
-const { styleLoader } = require('./utils');
+const { isProd } = require('./utils');
 
 module.exports = {
+  extractCSS: isProd,
   preserveWhitespace: false,
-  loaders: {
-    css: styleLoader({ fallback: 'vue-style-loader' }),
-  },
 };

scripts/webpack.base.conf.js

@@ -2,7 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const MinifyPlugin = require('babel-minify-webpack-plugin');
 const vueLoaderConfig = require('./vue-loader.conf');
-const { IS_DEV, styleRule, definitions } = require('./utils');
+const { isDev, isProd, styleRule, definitions } = require('./utils');
 
 const DIST = 'dist';
 const definePlugin = new webpack.DefinePlugin(definitions);
@@ -58,9 +58,9 @@ module.exports = {
     ],
   },
   // cheap-module-eval-source-map is faster for development
-  devtool: IS_DEV ? '#inline-source-map' : false,
+  devtool: isDev ? '#inline-source-map' : false,
   plugins: [
     definePlugin,
-    !IS_DEV && new MinifyPlugin(),
+    isProd && new MinifyPlugin(),
   ].filter(Boolean),
 };

scripts/webpack.conf.js

@@ -5,7 +5,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WrapperWebpackPlugin = require('wrapper-webpack-plugin');
 const base = require('./webpack.base.conf');
-const { IS_DEV, merge } = require('./utils');
+const { isProd, merge } = require('./utils');
 
 const entry = {
   'background/app': 'src/background/app.js',
@@ -51,7 +51,7 @@ targets.push(merge(base, {
       chunks: ['browser', 'common', 'popup/app'],
     }),
     // new FriendlyErrorsPlugin(),
-    !IS_DEV && new ExtractTextPlugin('[name].css'),
+    isProd && new ExtractTextPlugin('[name].css'),
     // new webpack.NormalModuleReplacementPlugin(/\.\/rules\.json$/, resource => {
     //   resource.request = path.resolve(__dirname, '../src/resources/empty-rules.json');
     // }),