chore: update vue-loader config

.github/ISSUE_TEMPLATE.md

@@ -1,5 +1,7 @@
 <!--
 Make sure you searched for existing issues that already report this problem.
+
+Note that duplicate issues or issues lack of essential information may be closed immediately!
 -->
 
 ### What is the problem?

.gitignore

@@ -1,6 +1,4 @@
-dist/
+/dist/
 node_modules/
-*.bat
-*.mxaddon
 *.log
 *.lock

gulpfile.js

@@ -10,7 +10,7 @@ const webpackConfig = require('./scripts/webpack.conf');
 const i18n = require('./scripts/i18n');
 const string = require('./scripts/string');
 const bom = require('./scripts/bom');
-const { IS_DEV, definitions } = require('./scripts/utils');
+const { isDev, isProd, definitions } = require('./scripts/utils');
 const pkg = require('./package.json');
 
 const DIST = 'dist';
@@ -82,7 +82,7 @@ function manifest() {
   .pipe(string((input, file) => {
     const data = yaml.safeLoad(input);
     data[0].version = pkg.version;
-    data[0].service.debug = IS_DEV;
+    data[0].service.debug = isDev;
     definitions['process.env'].manifest = JSON.stringify(data[0]);
     file.path = file.path.replace(/\.yml$/, '.json');
     return JSON.stringify(data);
@@ -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,7 +1,6 @@
-const { styleLoader } = require('./utils');
+const { isProd } = require('./utils');
 
 module.exports = {
-  loaders: {
-    css: styleLoader({ fallback: 'vue-style-loader' }),
-  },
+  extractCSS: isProd,
+  preserveWhitespace: false,
 };

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);
@@ -26,14 +26,6 @@ module.exports = {
       src: resolve('src'),
     }
   },
-  node: {
-    // css-loader requires unnecessary `Buffer` polyfill,
-    // which increases the bundle size significantly.
-    // See:
-    // - https://github.com/webpack-contrib/css-loader/issues/454
-    // - https://github.com/vuejs/vue-loader/issues/720
-    Buffer: false,
-  },
   module: {
     rules: [
       {
@@ -58,9 +50,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');
     // }),