liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: upgrade to webpack 4

Browse Source
This commit is contained in:
NGPixel 2018-03-16 22:51:56 -04:00
parent 97bf7a37df
commit c36e8b969f
7 changed files with 2065 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/app.js
View File

@ -57,6 +57,8 @@ window.graphQL = new ApolloClient({
// Initialize Vue Modules // Initialize Vue Modules
// ==================================== // ====================================
Vue.config.productionTip = false
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.use(VueApollo) Vue.use(VueApollo)
Vue.use(VueClipboards) Vue.use(VueClipboards)

180
dev/webpack/webpack.common.js
View File

@ -3,8 +3,7 @@ const fs = require('fs-extra')
const webpack = require('webpack') const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const NameAllModulesPlugin = require('name-all-modules-plugin')
const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc')) const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
const postCSSConfig = { const postCSSConfig = {
@ -25,7 +24,8 @@ module.exports = {
path: path.join(process.cwd(), 'assets'), path: path.join(process.cwd(), 'assets'),
publicPath: '/', publicPath: '/',
filename: 'js/[name].js', filename: 'js/[name].js',
chunkFilename: 'js/[name].chunk.js' chunkFilename: 'js/[name].chunk.js',
globalObject: 'this'
}, },
module: { module: {
rules: [ rules: [
@ -51,12 +51,8 @@ module.exports = {
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
{ MiniCssExtractPlugin.loader,
loader: 'style-loader' 'css-loader',
},
{
loader: 'css-loader'
},
{ {
loader: 'postcss-loader', loader: 'postcss-loader',
options: postCSSConfig options: postCSSConfig
@ -65,96 +61,70 @@ module.exports = {
}, },
{ {
test: /\.scss$/, test: /\.scss$/,
use: ExtractTextPlugin.extract({ use: [
fallback: 'style-loader', 'style-loader',
use: [ MiniCssExtractPlugin.loader,
{ 'css-loader',
loader: 'cache-loader', {
options: { loader: 'postcss-loader',
cacheDirectory: cacheDir options: postCSSConfig
} },
}, {
{ loader: 'sass-loader',
loader: 'css-loader' options: {
}, sourceMap: false
{
loader: 'postcss-loader',
options: postCSSConfig
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
} }
] }
}) ]
}, },
{ {
test: /\.styl$/, test: /\.styl$/,
use: ExtractTextPlugin.extract({ use: [
fallback: 'style-loader', 'style-loader',
use: [ MiniCssExtractPlugin.loader,
{ 'css-loader',
loader: 'cache-loader', {
options: { loader: 'postcss-loader',
cacheDirectory: cacheDir options: postCSSConfig
} },
}, 'stylus-loader'
{ ]
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: postCSSConfig
},
{
loader: 'stylus-loader'
}
]
})
}, },
{ {
test: /\.vue$/, test: /\.vue$/,
loader: 'vue-loader', loader: 'vue-loader',
options: { options: {
loaders: { loaders: {
css: ExtractTextPlugin.extract({ css: [
fallback: 'vue-style-loader', 'vue-style-loader',
use: [ MiniCssExtractPlugin.loader,
{ 'css-loader',
loader: 'css-loader' {
}, loader: 'postcss-loader',
{ options: postCSSConfig
loader: 'postcss-loader', }
options: postCSSConfig ],
scss: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: postCSSConfig
},
{
loader: 'sass-loader',
options: {
sourceMap: false
} }
] },
}), {
scss: ExtractTextPlugin.extract({ loader: 'sass-resources-loader',
fallback: 'vue-style-loader', options: {
use: [ resources: path.join(process.cwd(), '/client/scss/global.scss')
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: postCSSConfig
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-resources-loader',
options: {
resources: path.join(process.cwd(), '/client/scss/global.scss')
}
} }
] }
}), ],
js: [ js: [
{ {
loader: 'cache-loader', loader: 'cache-loader',
@ -223,26 +193,22 @@ module.exports = {
], { ], {
}), }),
new webpack.NamedModulesPlugin(), new MiniCssExtractPlugin({
new webpack.NamedChunksPlugin((chunk) => { filename: 'css/bundle.css',
if (chunk.name) { chunkFilename: 'css/[name].chunk.css'
return chunk.name })
}
return chunk.modules.map(m => path.relative(m.context, m.request)).join('_')
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks(module) {
return module.context && module.context.includes('node_modules')
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
minChunks: Infinity
}),
new NameAllModulesPlugin()
], ],
optimization: {
namedModules: true,
splitChunks: {
name: 'vendor',
minChunks: 2
},
noEmitOnErrors: true,
concatenateModules: true
},
resolve: { resolve: {
mainFields: ['browser', 'main', 'module'],
symlinks: true, symlinks: true,
alias: { alias: {
'@': path.join(process.cwd(), 'client'), '@': path.join(process.cwd(), 'client'),
@ -265,5 +231,9 @@ module.exports = {
node: { node: {
fs: 'empty' fs: 'empty'
}, },
stats: {
children: false,
entrypoints: false
},
target: 'web' target: 'web'
} }

6
dev/webpack/webpack.dev.js
View File

@ -1,13 +1,13 @@
const webpack = require('webpack') const webpack = require('webpack')
const merge = require('webpack-merge') const merge = require('webpack-merge')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const WriteFilePlugin = require('write-file-webpack-plugin') const WriteFilePlugin = require('write-file-webpack-plugin')
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin') const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const common = require('./webpack.common.js') const common = require('./webpack.common.js')
module.exports = merge(common, { module.exports = merge(common, {
mode: 'development',
entry: { entry: {
client: ['./client/index.js', 'webpack-hot-middleware/client'] client: ['./client/index.js', 'webpack-hot-middleware/client']
}, },
@ -19,9 +19,9 @@ module.exports = merge(common, {
format: 'compact' format: 'compact'
}), }),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development') 'process.env.NODE_ENV': JSON.stringify('development'),
'__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
}), }),
new ExtractTextPlugin({ disable: true }),
new WriteFilePlugin(), new WriteFilePlugin(),
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin([ new webpack.WatchIgnorePlugin([

33
dev/webpack/webpack.prod.js
View File

@ -1,18 +1,15 @@
const webpack = require('webpack') const webpack = require('webpack')
const merge = require('webpack-merge') const merge = require('webpack-merge')
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OfflinePlugin = require('offline-plugin') const OfflinePlugin = require('offline-plugin')
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin') const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const common = require('./webpack.common.js') const common = require('./webpack.common.js')
module.exports = merge(common, { module.exports = merge(common, {
mode: 'production',
module: { module: {
rules: [] rules: []
}, },
@ -29,28 +26,21 @@ module.exports = merge(common, {
root: process.cwd(), root: process.cwd(),
verbose: false verbose: false
}), }),
new UglifyJSPlugin({
cache: path.join(process.cwd(), '.webpack-cache/uglify'),
parallel: true
}),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production') 'process.env.NODE_ENV': JSON.stringify('production')
}), }),
new ExtractTextPlugin({
filename: 'css/bundle.css',
allChunks: true
}),
new OptimizeCssAssetsPlugin({ new OptimizeCssAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true } }, cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true canPrint: true
}), }),
new OfflinePlugin({ new OfflinePlugin({
ServiceWorker: {
minify: false
},
publicPath: '/', publicPath: '/',
externals: ['/'], externals: ['/'],
caches: { caches: {
main: [ main: [
'js/runtime.js',
'js/vendor.js',
'js/client.js' 'js/client.js'
], ],
additional: [ additional: [
@ -61,19 +51,6 @@ module.exports = merge(common, {
] ]
}, },
safeToUseOptionalCaches: true safeToUseOptionalCaches: true
}), })
new DuplicatePackageCheckerPlugin(),
// Disable Extract Text Plugin stats:
{
apply(compiler) {
compiler.plugin('done', stats => {
if (Array.isArray(stats.compilation.children)) {
stats.compilation.children = stats.compilation.children.filter(child => {
return child.name.indexOf('extract-text-webpack-plugin') !== 0
})
}
})
}
}
] ]
}) })

43
package.json
View File

@ -44,7 +44,7 @@
"bcryptjs-then": "1.0.1", "bcryptjs-then": "1.0.1",
"bluebird": "3.5.1", "bluebird": "3.5.1",
"body-parser": "1.18.2", "body-parser": "1.18.2",
"bugsnag": "2.3.0", "bugsnag": "2.3.1",
"bull": "3.3.10", "bull": "3.3.10",
"cheerio": "1.0.0-rc.2", "cheerio": "1.0.0-rc.2",
"child-process-promise": "2.2.1", "child-process-promise": "2.2.1",
@ -56,8 +56,8 @@
"dependency-graph": "0.7.0", "dependency-graph": "0.7.0",
"diff2html": "2.3.3", "diff2html": "2.3.3",
"dotize": "^0.2.0", "dotize": "^0.2.0",
"execa": "0.9.0", "execa": "0.10.0",
"express": "4.16.2", "express": "4.16.3",
"express-brute": "1.0.1", "express-brute": "1.0.1",
"express-brute-redis": "0.0.1", "express-brute-redis": "0.0.1",
"express-session": "1.15.6", "express-session": "1.15.6",
@ -65,10 +65,10 @@
"filesize.js": "1.0.2", "filesize.js": "1.0.2",
"follow-redirects": "1.4.1", "follow-redirects": "1.4.1",
"fs-extra": "5.0.0", "fs-extra": "5.0.0",
"graphql": "0.13.1", "graphql": "0.13.2",
"graphql-list-fields": "2.0.1", "graphql-list-fields": "2.0.1",
"graphql-tools": "2.21.0", "graphql-tools": "2.23.1",
"i18next": "10.5.0", "i18next": "10.5.1",
"i18next-express-middleware": "1.1.1", "i18next-express-middleware": "1.1.1",
"i18next-localstorage-cache": "1.1.1", "i18next-localstorage-cache": "1.1.1",
"i18next-node-fs-backend": "1.0.0", "i18next-node-fs-backend": "1.0.0",
@ -124,11 +124,11 @@
"raven": "2.4.2", "raven": "2.4.2",
"read-chunk": "2.1.0", "read-chunk": "2.1.0",
"remove-markdown": "0.2.2", "remove-markdown": "0.2.2",
"request": "2.83.0", "request": "2.85.0",
"request-promise": "4.2.2", "request-promise": "4.2.2",
"scim-query-filter-parser": "1.1.0", "scim-query-filter-parser": "1.1.0",
"semver": "5.5.0", "semver": "5.5.0",
"sequelize": "4.36.0", "sequelize": "4.37.1",
"serve-favicon": "2.4.5", "serve-favicon": "2.4.5",
"uuid": "3.2.1", "uuid": "3.2.1",
"validator": "9.4.1", "validator": "9.4.1",
@ -138,6 +138,7 @@
}, },
"devDependencies": { "devDependencies": {
"@panter/vue-i18next": "0.9.1", "@panter/vue-i18next": "0.9.1",
"@vue/cli": "3.0.0-beta.6",
"apollo-client-preset": "1.0.8", "apollo-client-preset": "1.0.8",
"apollo-fetch": "0.7.0", "apollo-fetch": "0.7.0",
"apollo-link-batch-http": "1.2.1", "apollo-link-batch-http": "1.2.1",
@ -145,7 +146,7 @@
"babel-cli": "6.26.0", "babel-cli": "6.26.0",
"babel-core": "6.26.0", "babel-core": "6.26.0",
"babel-eslint": "8.2.2", "babel-eslint": "8.2.2",
"babel-jest": "22.4.1", "babel-jest": "23.0.0-alpha.0",
"babel-loader": "7.1.4", "babel-loader": "7.1.4",
"babel-plugin-graphql-tag": "1.5.0", "babel-plugin-graphql-tag": "1.5.0",
"babel-plugin-lodash": "3.3.2", "babel-plugin-lodash": "3.3.2",
@ -157,12 +158,12 @@
"brace": "0.11.1", "brace": "0.11.1",
"cache-loader": "1.2.2", "cache-loader": "1.2.2",
"clean-webpack-plugin": "0.1.19", "clean-webpack-plugin": "0.1.19",
"colors": "1.2.0", "colors": "1.2.1",
"copy-webpack-plugin": "4.5.1", "copy-webpack-plugin": "4.5.1",
"css-loader": "0.28.10", "css-loader": "0.28.11",
"cssnano": "4.0.0-rc.2", "cssnano": "4.0.0-rc.2",
"duplicate-package-checker-webpack-plugin": "2.1.0", "duplicate-package-checker-webpack-plugin": "2.1.0",
"eslint": "4.18.2", "eslint": "4.19.0",
"eslint-config-requarks": "1.0.7", "eslint-config-requarks": "1.0.7",
"eslint-config-standard": "11.0.0", "eslint-config-standard": "11.0.0",
"eslint-plugin-import": "2.9.0", "eslint-plugin-import": "2.9.0",
@ -181,10 +182,11 @@
"jest-junit": "3.6.0", "jest-junit": "3.6.0",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"lodash-webpack-plugin": "0.11.4", "lodash-webpack-plugin": "0.11.4",
"mini-css-extract-plugin": "0.2.0",
"name-all-modules-plugin": "1.0.1", "name-all-modules-plugin": "1.0.1",
"node-sass": "4.7.2", "node-sass": "4.7.2",
"offline-plugin": "4.9.0", "offline-plugin": "4.9.0",
"optimize-css-assets-webpack-plugin": "3.2.0", "optimize-css-assets-webpack-plugin": "4.0.0",
"postcss-flexbugs-fixes": "3.3.0", "postcss-flexbugs-fixes": "3.3.0",
"postcss-flexibility": "2.0.0", "postcss-flexibility": "2.0.0",
"postcss-loader": "2.1.1", "postcss-loader": "2.1.1",
@ -200,10 +202,10 @@
"stylus": "0.54.5", "stylus": "0.54.5",
"stylus-loader": "3.0.2", "stylus-loader": "3.0.2",
"twemoji-awesome": "1.0.6", "twemoji-awesome": "1.0.6",
"uglifyjs-webpack-plugin": "1.2.3", "uglifyjs-webpack-plugin": "1.2.4",
"vee-validate": "2.0.5", "vee-validate": "2.0.5",
"velocity-animate": "1.5.1", "velocity-animate": "1.5.1",
"vue": "2.5.15", "vue": "2.5.16",
"vue-apollo": "3.0.0-beta.5", "vue-apollo": "3.0.0-beta.5",
"vue-clipboards": "1.2.2", "vue-clipboards": "1.2.2",
"vue-codemirror": "4.0.3", "vue-codemirror": "4.0.3",
@ -212,13 +214,14 @@
"vue-material-design-icons": "1.2.1", "vue-material-design-icons": "1.2.1",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-simple-breakpoints": "1.0.3", "vue-simple-breakpoints": "1.0.3",
"vue-template-compiler": "2.5.15", "vue-template-compiler": "2.5.16",
"vuetify": "1.0.6", "vuetify": "1.0.8",
"vuex": "3.0.1", "vuex": "3.0.1",
"vuex-persistedstate": "2.4.2", "vuex-persistedstate": "2.5.1",
"webpack": "3.11.0", "webpack": "4.1.1",
"webpack-bundle-analyzer": "2.11.1", "webpack-bundle-analyzer": "2.11.1",
"webpack-dev-middleware": "2.0.3", "webpack-cli": "2.0.12",
"webpack-dev-middleware": "3.0.1",
"webpack-hot-middleware": "2.21.2", "webpack-hot-middleware": "2.21.2",
"webpack-merge": "4.1.2", "webpack-merge": "4.1.2",
"whatwg-fetch": "2.0.3", "whatwg-fetch": "2.0.3",

3
server/views/master.pug
View File

@ -25,11 +25,8 @@ html
link(type='text/css', rel='stylesheet', href='/css/bundle.css') link(type='text/css', rel='stylesheet', href='/css/bundle.css')
link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Source+Code+Pro:400,700|Material+Icons') link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Source+Code+Pro:400,700|Material+Icons')
link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css') link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" />
//- JS //- JS
script(type='text/javascript', src='/js/runtime.js')
script(type='text/javascript', src='/js/vendor.js')
script(type='text/javascript', src='/js/client.js') script(type='text/javascript', src='/js/client.js')
block head block head

2240
yarn.lock
View File

File diff suppressed because it is too large Load Diff