feat: support webpack 5

resolves #136
vuetifyjs · Jan 18, 2021 · 4de3c94 · 4de3c94
1 parent 0bbc7dd
commit 4de3c94
Show file tree

Hide file tree

Showing 32 changed files with 5,946 additions and 2,706 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 .vs
 .vscode
 .idea
-/node_modules
+node_modules
 yarn_error.log
diff --git a/dev/package.json b/dev/package.json
diff --git a/dev/.editorconfig → dev4/.editorconfig b/dev/.editorconfig → dev4/.editorconfig
diff --git a/dev/.gitignore → dev4/.gitignore b/dev/.gitignore → dev4/.gitignore
diff --git a/dev/README.md → dev4/README.md b/dev/README.md → dev4/README.md
diff --git a/dev/babel.config.js → dev4/babel.config.js b/dev/babel.config.js → dev4/babel.config.js
diff --git a/dev/index.html → dev4/index.html b/dev/index.html → dev4/index.html
diff --git a/dev4/package.json b/dev4/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "dev",
+  "description": "A Vue.js project",
+  "version": "1.0.0",
+  "author": "",
+  "license": "UNLICENSED",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node --preserve-symlinks node_modules/.bin/webpack-dev-server --open --hot",
+    "build:dev": "cross-env NODE_ENV=development node --preserve-symlinks node_modules/.bin/webpack --progress --hide-modules",
+    "build": "cross-env NODE_ENV=production node --preserve-symlinks node_modules/.bin/webpack --progress --hide-modules"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.0.1",
+    "fibers": "^5.0.0",
+    "sass": "^1.32.4",
+    "sass-loader": "^10.1.1",
+    "url-loader": "^4.1.1",
+    "vue": "^2.6.12",
+    "vue-loader": "^15.9.6",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.12",
+    "vuetify": "^2.4.2",
+    "vuetify-loader": "link:../",
+    "webpack": "^4.41.5",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.2"
+  },
+  "browserslist": "last 2 Chrome versions"
+}
diff --git a/dev/src/App.vue → dev4/src/App.vue b/dev/src/App.vue → dev4/src/App.vue
diff --git a/dev/src/_variables.scss → dev4/src/_variables.scss b/dev/src/_variables.scss → dev4/src/_variables.scss
diff --git a/dev/src/main.js → dev4/src/main.js b/dev/src/main.js → dev4/src/main.js
diff --git a/dev/src/vuetify.png → dev4/src/vuetify.png b/dev/src/vuetify.png → dev4/src/vuetify.png
diff --git a/dev/webpack.config.js → dev4/webpack.config.js b/dev/webpack.config.js → dev4/webpack.config.js
@@ -9,7 +9,7 @@ const isProd = process.env.NODE_ENV === 'production'
 function sassLoaderOptions (indentedSyntax = false) {
   return {
     implementation: require('sass'),
-    prependData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
+    additionalData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
     sassOptions: { indentedSyntax },
   }
 }
@@ -38,15 +38,15 @@ module.exports = {
         test: /\.sass$/,
         use: [
           'vue-style-loader',
-          'css-loader',
+          { loader: 'css-loader',  options: { esModule: false } },
           { loader: 'sass-loader', options: sassLoaderOptions(true) }
         ]
       },
       {
         test: /\.scss$/,
         use: [
           'vue-style-loader',
-          'css-loader',
+          { loader: 'css-loader',  options: { esModule: false } },
           { loader: 'sass-loader', options: sassLoaderOptions() }
         ]
       },

diff --git a/dev/yarn.lock → dev4/yarn.lock b/dev/yarn.lock → dev4/yarn.lock
diff --git a/dev5/.editorconfig b/dev5/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/dev5/.gitignore b/dev5/.gitignore
@@ -0,0 +1,12 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/dev5/README.md b/dev5/README.md
@@ -0,0 +1,18 @@
+# dev
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/dev5/babel.config.js b/dev5/babel.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {
+      modules: false,
+      targets: 'last 2 Chrome versions'
+    }]
+  ]
+}
diff --git a/dev5/index.html b/dev5/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>dev</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>
diff --git a/dev5/package.json b/dev5/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "dev",
+  "description": "A Vue.js project",
+  "version": "1.0.0",
+  "author": "",
+  "license": "UNLICENSED",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node --preserve-symlinks node_modules/.bin/webpack serve --open --hot",
+    "build:dev": "cross-env NODE_ENV=development node --preserve-symlinks node_modules/.bin/webpack --progress",
+    "build": "cross-env NODE_ENV=production node --preserve-symlinks node_modules/.bin/webpack --progress"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.0.1",
+    "fibers": "^5.0.0",
+    "sass": "^1.32.4",
+    "sass-loader": "^10.1.1",
+    "url-loader": "^4.1.1",
+    "vue": "^2.6.12",
+    "vue-loader": "^15.9.6",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.12",
+    "vuetify": "^2.4.2",
+    "vuetify-loader": "link:../",
+    "webpack": "^5.15.0",
+    "webpack-bundle-analyzer": "^4.3.0",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "browserslist": "last 2 Chrome versions"
+}
diff --git a/dev5/src/App.vue b/dev5/src/App.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-card v-ripple>
+        <div style="text-align: center">
+          <v-img src="@/vuetify.png" style="display: inline-flex"></v-img>
+        </div>
+        <v-card-text>
+          <v-text-field></v-text-field>
+        </v-card-text>
+      </v-card>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+  const img = require('@/vuetify.png?vuetify-preload')
+  console.log(img, img.default)
+  export default {}
+</script>
+
+<docs>
+This is the documentation for App.vue
+</docs>
diff --git a/dev5/src/_variables.scss b/dev5/src/_variables.scss
@@ -0,0 +1,7 @@
+$color-pack: false;
+
+@import '~vuetify/src/styles/styles.sass';
+
+@each $name, $value in $utilities {
+  $utilities: map-merge($utilities, ($name: false));
+}
diff --git a/dev5/src/main.js b/dev5/src/main.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib/framework'
+import App from './App.vue'
+
+Vue.use(Vuetify)
+
+new Vue({
+  el: '#app',
+  vuetify: new Vuetify(),
+  render: h => h(App)
+})
diff --git a/dev5/src/vuetify.png b/dev5/src/vuetify.png
diff --git a/dev5/webpack.config.js b/dev5/webpack.config.js
@@ -0,0 +1,100 @@
+var path = require('path')
+var webpack = require('webpack')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+const isProd = process.env.NODE_ENV === 'production'
+
+function sassLoaderOptions (indentedSyntax = false) {
+  return {
+    implementation: require('sass'),
+    additionalData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
+    sassOptions: { indentedSyntax },
+  }
+}
+
+module.exports = {
+  devtool: 'source-map',
+  mode: isProd ? 'production' : 'development',
+  entry: './src/main.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules\/(?!(vuetify)\/)/
+      },
+      {
+        test: /\.sass$/,
+        use: [
+          'vue-style-loader',
+          { loader: 'css-loader',  options: { esModule: false } },
+          { loader: 'sass-loader', options: sassLoaderOptions(true) }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          { loader: 'css-loader',  options: { esModule: false } },
+          { loader: 'sass-loader', options: sassLoaderOptions() }
+        ]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)(\?.*)?$/,
+        loader: 'url-loader',
+        options: { limit: 1024 }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': path.resolve(__dirname, './node_modules/vue/dist/vue.runtime.esm.js'),
+      '@': path.resolve(__dirname, 'src')
+    },
+    extensions: ['*', '.js', '.vue', '.json']
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new VuetifyLoaderPlugin({
+      progressiveImages: true
+    }),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false
+    })
+  ],
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true
+  },
+  performance: {
+    hints: false
+  },
+  optimization: {
+    concatenateModules: false
+  }
+}
+
+if (isProd) {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    })
+  ])
+}