Update webpack.base.conf.js

build/webpack.base.conf.js

@@ -1,77 +1,82 @@
-var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var projectRoot = path.resolve(__dirname, '../')
+import path from 'path';
+import config from '../config';
+import utils from './utils';
+import { fileURLToPath } from 'url';
+import webpack from 'webpack';
 
-var env = process.env.NODE_ENV
-    // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
-    // various preprocessor loaders added to vue-loader at the end of this file
-var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
-var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
-var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
+const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../');
 
+const env = process.env.NODE_ENV;
+const cssSourceMapDev = env === 'development' && config.dev.cssSourceMap;
+const cssSourceMapProd = env === 'production' && config.build.productionSourceMap;
+const useCssSourceMap = cssSourceMapDev || cssSourceMapProd;
 
-module.exports = {
-    entry: {
-        app: './src/main.js'
+export default {
+  entry: {
+    app: './src/main.js',
+  },
+  output: {
+    path: config.build.assetsRoot,
+    publicPath: env === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+    filename: '[name].js',
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.less', '.css', '.scss'],
+    alias: {
+      vue$: 'vue/dist/vue.esm.js',
+      src: path.resolve(projectRoot, 'src'),
+      assets: path.resolve(projectRoot, 'src/assets'),
+      components: path.resolve(projectRoot, 'src/components'),
     },
-    output: {
-        path: config.build.assetsRoot,
-        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
-        filename: '[name].js'
-    },
-    resolve: {
-        extensions: ['', '.js', '.vue', '.less', '.css', '.scss'],
-        fallback: [path.join(__dirname, '../node_modules')],
-        alias: {
-            'vue$': 'vue/dist/vue.common.js',
-            'src': path.resolve(__dirname, '../src'),
-            'assets': path.resolve(__dirname, '../src/assets'),
-            'components': path.resolve(__dirname, '../src/components')
-        }
-    },
-    resolveLoader: {
-        fallback: [path.join(__dirname, '../node_modules')]
-    },
-    module: {
-        loaders: [{
-            test: /\.vue$/,
-            loader: 'vue'
-        }, {
-            test: /\.js$/,
-            loader: 'babel',
-            include: projectRoot,
-            exclude: /node_modules/
-        }, {
-            test: /\.json$/,
-            loader: 'json'
-        }, {
-            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-            loader: 'url',
-            query: {
-                limit: 10000,
-                name: utils.assetsPath('img/[name].[ext]')
-            }
-        }, {
-            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-            loader: 'url',
-            query: {
-                limit: 10000,
-                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-            }
-        }]
-    },
-    vue: {
-        loaders: utils.cssLoaders({
-            sourceMap: useCssSourceMap
-        }),
-        postcss: [
+    modules: [path.resolve(projectRoot, 'node_modules')],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
+          postcss: [
             require('autoprefixer')({
-                browsers: [
-                  'Android >= 4.4',
-                  'iOS >= 8'
-                ]
-            })
-        ]
-    }
-}
+              overrideBrowserslist: ['Android >= 4.4', 'iOS >= 8'],
+            }),
+          ],
+        },
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: projectRoot,
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader',
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[ext]'),
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(env),
+      },
+    }),
+  ],
+};