Skip to content

Commit 4de3c94

Browse files
KaelWDKaelWD
committed
feat: support webpack 5
resolves #136
1 parent 0bbc7dd commit 4de3c94

32 files changed

+5946
-2706
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.vs
22
.vscode
33
.idea
4-
/node_modules
4+
node_modules
55
yarn_error.log

‎dev/package.json

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎dev/.editorconfig renamed to ‎dev4/.editorconfig

File renamed without changes.

‎dev/.gitignore renamed to ‎dev4/.gitignore

File renamed without changes.

‎dev/README.md renamed to ‎dev4/README.md

File renamed without changes.

‎dev/babel.config.js renamed to ‎dev4/babel.config.js

File renamed without changes.

‎dev/index.html renamed to ‎dev4/index.html

File renamed without changes.

‎dev4/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "dev",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "",
6+
"license": "UNLICENSED",
7+
"private": true,
8+
"scripts": {
9+
"dev": "cross-env NODE_ENV=development node --preserve-symlinks node_modules/.bin/webpack-dev-server --open --hot",
10+
"build:dev": "cross-env NODE_ENV=development node --preserve-symlinks node_modules/.bin/webpack --progress --hide-modules",
11+
"build": "cross-env NODE_ENV=production node --preserve-symlinks node_modules/.bin/webpack --progress --hide-modules"
12+
},
13+
"devDependencies": {
14+
"@babel/core": "^7.12.10",
15+
"@babel/preset-env": "^7.12.11",
16+
"babel-loader": "^8.2.2",
17+
"cross-env": "^7.0.3",
18+
"css-loader": "^5.0.1",
19+
"fibers": "^5.0.0",
20+
"sass": "^1.32.4",
21+
"sass-loader": "^10.1.1",
22+
"url-loader": "^4.1.1",
23+
"vue": "^2.6.12",
24+
"vue-loader": "^15.9.6",
25+
"vue-style-loader": "^4.1.2",
26+
"vue-template-compiler": "^2.6.12",
27+
"vuetify": "^2.4.2",
28+
"vuetify-loader": "link:../",
29+
"webpack": "^4.41.5",
30+
"webpack-bundle-analyzer": "^3.6.0",
31+
"webpack-cli": "^3.3.10",
32+
"webpack-dev-server": "^3.10.2"
33+
},
34+
"browserslist": "last 2 Chrome versions"
35+
}

‎dev/src/App.vue renamed to ‎dev4/src/App.vue

File renamed without changes.

‎dev/src/_variables.scss renamed to ‎dev4/src/_variables.scss

File renamed without changes.

‎dev/src/main.js renamed to ‎dev4/src/main.js

File renamed without changes.

‎dev/src/vuetify.png renamed to ‎dev4/src/vuetify.png

File renamed without changes.

‎dev/webpack.config.js renamed to ‎dev4/webpack.config.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const isProd = process.env.NODE_ENV === 'production'
99
function sassLoaderOptions (indentedSyntax = false) {
1010
return {
1111
implementation: require('sass'),
12-
prependData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
12+
additionalData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
1313
sassOptions: { indentedSyntax },
1414
}
1515
}
@@ -38,15 +38,15 @@ module.exports = {
3838
test: /\.sass$/,
3939
use: [
4040
'vue-style-loader',
41-
'css-loader',
41+
{ loader: 'css-loader', options: { esModule: false } },
4242
{ loader: 'sass-loader', options: sassLoaderOptions(true) }
4343
]
4444
},
4545
{
4646
test: /\.scss$/,
4747
use: [
4848
'vue-style-loader',
49-
'css-loader',
49+
{ loader: 'css-loader', options: { esModule: false } },
5050
{ loader: 'sass-loader', options: sassLoaderOptions() }
5151
]
5252
},

‎dev/yarn.lock renamed to ‎dev4/yarn.lock

Lines changed: 369 additions & 441 deletions
Large diffs are not rendered by default.

‎dev5/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎dev5/.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
7+
# Editor directories and files
8+
.idea
9+
*.suo
10+
*.ntvs*
11+
*.njsproj
12+
*.sln

‎dev5/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# dev
2+
3+
> A Vue.js project
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# build for production with minification
15+
npm run build
16+
```
17+
18+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎dev5/babel.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
presets: [
3+
['@babel/preset-env', {
4+
modules: false,
5+
targets: 'last 2 Chrome versions'
6+
}]
7+
]
8+
}

‎dev5/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>dev</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎dev5/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "dev",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "",
6+
"license": "UNLICENSED",
7+
"private": true,
8+
"scripts": {
9+
"dev": "cross-env NODE_ENV=development node --preserve-symlinks node_modules/.bin/webpack serve --open --hot",
10+
"build:dev": "cross-env NODE_ENV=development node --preserve-symlinks node_modules/.bin/webpack --progress",
11+
"build": "cross-env NODE_ENV=production node --preserve-symlinks node_modules/.bin/webpack --progress"
12+
},
13+
"devDependencies": {
14+
"@babel/core": "^7.12.10",
15+
"@babel/preset-env": "^7.12.11",
16+
"babel-loader": "^8.2.2",
17+
"cross-env": "^7.0.3",
18+
"css-loader": "^5.0.1",
19+
"fibers": "^5.0.0",
20+
"sass": "^1.32.4",
21+
"sass-loader": "^10.1.1",
22+
"url-loader": "^4.1.1",
23+
"vue": "^2.6.12",
24+
"vue-loader": "^15.9.6",
25+
"vue-style-loader": "^4.1.2",
26+
"vue-template-compiler": "^2.6.12",
27+
"vuetify": "^2.4.2",
28+
"vuetify-loader": "link:../",
29+
"webpack": "^5.15.0",
30+
"webpack-bundle-analyzer": "^4.3.0",
31+
"webpack-cli": "^4.3.1",
32+
"webpack-dev-server": "^3.11.2"
33+
},
34+
"browserslist": "last 2 Chrome versions"
35+
}

‎dev5/src/App.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<v-app>
3+
<v-container>
4+
<v-card v-ripple>
5+
<div style="text-align: center">
6+
<v-img src="@/vuetify.png" style="display: inline-flex"></v-img>
7+
</div>
8+
<v-card-text>
9+
<v-text-field></v-text-field>
10+
</v-card-text>
11+
</v-card>
12+
</v-container>
13+
</v-app>
14+
</template>
15+
16+
<script>
17+
const img = require('@/vuetify.png?vuetify-preload')
18+
console.log(img, img.default)
19+
export default {}
20+
</script>
21+
22+
<docs>
23+
This is the documentation for App.vue
24+
</docs>

‎dev5/src/_variables.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
$color-pack: false;
2+
3+
@import '~vuetify/src/styles/styles.sass';
4+
5+
@each $name, $value in $utilities {
6+
$utilities: map-merge($utilities, ($name: false));
7+
}

‎dev5/src/main.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue'
2+
import Vuetify from 'vuetify/lib/framework'
3+
import App from './App.vue'
4+
5+
Vue.use(Vuetify)
6+
7+
new Vue({
8+
el: '#app',
9+
vuetify: new Vuetify(),
10+
render: h => h(App)
11+
})

‎dev5/src/vuetify.png

2.39 KB
Loading

‎dev5/webpack.config.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
const VueLoaderPlugin = require('vue-loader/lib/plugin')
4+
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
5+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
6+
7+
const isProd = process.env.NODE_ENV === 'production'
8+
9+
function sassLoaderOptions (indentedSyntax = false) {
10+
return {
11+
implementation: require('sass'),
12+
additionalData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
13+
sassOptions: { indentedSyntax },
14+
}
15+
}
16+
17+
module.exports = {
18+
devtool: 'source-map',
19+
mode: isProd ? 'production' : 'development',
20+
entry: './src/main.js',
21+
output: {
22+
path: path.resolve(__dirname, './dist'),
23+
publicPath: '/dist/',
24+
filename: 'build.js'
25+
},
26+
module: {
27+
rules: [
28+
{
29+
test: /\.vue$/,
30+
loader: 'vue-loader',
31+
},
32+
{
33+
test: /\.js$/,
34+
loader: 'babel-loader',
35+
exclude: /node_modules\/(?!(vuetify)\/)/
36+
},
37+
{
38+
test: /\.sass$/,
39+
use: [
40+
'vue-style-loader',
41+
{ loader: 'css-loader', options: { esModule: false } },
42+
{ loader: 'sass-loader', options: sassLoaderOptions(true) }
43+
]
44+
},
45+
{
46+
test: /\.scss$/,
47+
use: [
48+
'vue-style-loader',
49+
{ loader: 'css-loader', options: { esModule: false } },
50+
{ loader: 'sass-loader', options: sassLoaderOptions() }
51+
]
52+
},
53+
{
54+
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)(\?.*)?$/,
55+
loader: 'url-loader',
56+
options: { limit: 1024 }
57+
}
58+
]
59+
},
60+
resolve: {
61+
alias: {
62+
'vue$': path.resolve(__dirname, './node_modules/vue/dist/vue.runtime.esm.js'),
63+
'@': path.resolve(__dirname, 'src')
64+
},
65+
extensions: ['*', '.js', '.vue', '.json']
66+
},
67+
plugins: [
68+
new VueLoaderPlugin(),
69+
new VuetifyLoaderPlugin({
70+
progressiveImages: true
71+
}),
72+
new BundleAnalyzerPlugin({
73+
analyzerMode: 'static',
74+
openAnalyzer: false
75+
})
76+
],
77+
devServer: {
78+
historyApiFallback: true,
79+
noInfo: true,
80+
overlay: true
81+
},
82+
performance: {
83+
hints: false
84+
},
85+
optimization: {
86+
concatenateModules: false
87+
}
88+
}
89+
90+
if (isProd) {
91+
module.exports.devtool = '#source-map'
92+
// http://vue-loader.vuejs.org/en/workflow/production.html
93+
module.exports.plugins = (module.exports.plugins || []).concat([
94+
new webpack.DefinePlugin({
95+
'process.env': {
96+
NODE_ENV: '"production"'
97+
}
98+
})
99+
])
100+
}

0 commit comments

Comments
 (0)