Skip to content

Commit

Permalink
feat: support webpack 5
Browse files Browse the repository at this point in the history
resolves #136
  • Loading branch information
KaelWD committed Jan 18, 2021
1 parent 0bbc7dd commit 4de3c94
Show file tree
Hide file tree
Showing 32 changed files with 5,946 additions and 2,706 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.vs
.vscode
.idea
/node_modules
node_modules
yarn_error.log
35 changes: 0 additions & 35 deletions dev/package.json

This file was deleted.

File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
35 changes: 35 additions & 0 deletions dev4/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
6 changes: 3 additions & 3 deletions dev/webpack.config.js → dev4/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
}
}
Expand Down Expand Up @@ -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() }
]
},
Expand Down
810 changes: 369 additions & 441 deletions dev/yarn.lock → dev4/yarn.lock

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions dev5/.editorconfig
Original file line number Diff line number Diff line change
@@ -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
12 changes: 12 additions & 0 deletions dev5/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.DS_Store
node_modules/
dist/
npm-debug.log
yarn-error.log

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
18 changes: 18 additions & 0 deletions dev5/README.md
Original file line number Diff line number Diff line change
@@ -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).
8 changes: 8 additions & 0 deletions dev5/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = {
presets: [
['@babel/preset-env', {
modules: false,
targets: 'last 2 Chrome versions'
}]
]
}
11 changes: 11 additions & 0 deletions dev5/index.html
Original file line number Diff line number Diff line change
@@ -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>
35 changes: 35 additions & 0 deletions dev5/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
24 changes: 24 additions & 0 deletions dev5/src/App.vue
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 7 additions & 0 deletions dev5/src/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
$color-pack: false;

@import '~vuetify/src/styles/styles.sass';

@each $name, $value in $utilities {
$utilities: map-merge($utilities, ($name: false));
}
11 changes: 11 additions & 0 deletions dev5/src/main.js
Original file line number Diff line number Diff line change
@@ -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)
})
Binary file added dev5/src/vuetify.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 100 additions & 0 deletions dev5/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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"'
}
})
])
}
Loading

0 comments on commit 4de3c94

Please sign in to comment.