richard
/
wiki
mirror of https://github.com/Requarks/wiki.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: upgrade to webpack 4

pull/621/head
NGPixel 6 years ago
parent
97bf7a37df
commit
c36e8b969f
7 changed files with 2075 additions and 452 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      client/app.js
  2. 180
      dev/webpack/webpack.common.js
  3. 6
      dev/webpack/webpack.dev.js
  4. 33
      dev/webpack/webpack.prod.js
  5. 43
      package.json
  6. 3
      server/views/master.pug
  7. 2260
      yarn.lock

2
client/app.js
View File

@ -57,6 +57,8 @@ window.graphQL = new ApolloClient({
// Initialize Vue Modules
// ====================================
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueApollo)
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 CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const NameAllModulesPlugin = require('name-all-modules-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
const postCSSConfig = {
@ -25,7 +24,8 @@ module.exports = {
path: path.join(process.cwd(), 'assets'),
publicPath: '/',
filename: 'js/[name].js',
chunkFilename: 'js/[name].chunk.js'
chunkFilename: 'js/[name].chunk.js',
globalObject: 'this'
},
module: {
rules: [
@ -51,12 +51,8 @@ module.exports = {
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: postCSSConfig
@ -65,96 +61,70 @@ module.exports = {
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: cacheDir
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: postCSSConfig
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: postCSSConfig
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
]
})
}
]
},
{
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: cacheDir
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: postCSSConfig
},
{
loader: 'stylus-loader'
}
]
})
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: postCSSConfig
},
'stylus-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: [
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: postCSSConfig
css: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
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({
fallback: 'vue-style-loader',
use: [
{
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')
}
},
{
loader: 'sass-resources-loader',
options: {
resources: path.join(process.cwd(), '/client/scss/global.scss')
}
]
}),
}
],
js: [
{
loader: 'cache-loader',
@ -223,26 +193,22 @@ module.exports = {
], {
}),
new webpack.NamedModulesPlugin(),
new webpack.NamedChunksPlugin((chunk) => {
if (chunk.name) {
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()
new MiniCssExtractPlugin({
filename: 'css/bundle.css',
chunkFilename: 'css/[name].chunk.css'
})
],
optimization: {
namedModules: true,
splitChunks: {
name: 'vendor',
minChunks: 2
},
noEmitOnErrors: true,
concatenateModules: true
},
resolve: {
mainFields: ['browser', 'main', 'module'],
symlinks: true,
alias: {
'@': path.join(process.cwd(), 'client'),
@ -265,5 +231,9 @@ module.exports = {
node: {
fs: 'empty'
},
stats: {
children: false,
entrypoints: false
},
target: 'web'
}

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

@ -1,13 +1,13 @@
const webpack = require('webpack')
const merge = require('webpack-merge')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const WriteFilePlugin = require('write-file-webpack-plugin')
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
entry: {
client: ['./client/index.js', 'webpack-hot-middleware/client']
},
@ -19,9 +19,9 @@ module.exports = merge(common, {
format: 'compact'
}),
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 webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin([

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

@ -1,18 +1,15 @@
const webpack = require('webpack')
const merge = require('webpack-merge')
const path = require('path')
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 DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'production',
module: {
rules: []
},
@ -29,28 +26,21 @@ module.exports = merge(common, {
root: process.cwd(),
verbose: false
}),
new UglifyJSPlugin({
cache: path.join(process.cwd(), '.webpack-cache/uglify'),
parallel: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new ExtractTextPlugin({
filename: 'css/bundle.css',
allChunks: true
}),
new OptimizeCssAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
new OfflinePlugin({
ServiceWorker: {
minify: false
},
publicPath: '/',
externals: ['/'],
caches: {
main: [
'js/runtime.js',
'js/vendor.js',
'js/client.js'
],
additional: [
@ -61,19 +51,6 @@ module.exports = merge(common, {
]
},
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",
"bluebird": "3.5.1",
"body-parser": "1.18.2",
"bugsnag": "2.3.0",
"bugsnag": "2.3.1",
"bull": "3.3.10",
"cheerio": "1.0.0-rc.2",
"child-process-promise": "2.2.1",
@ -56,8 +56,8 @@
"dependency-graph": "0.7.0",
"diff2html": "2.3.3",
"dotize": "^0.2.0",
"execa": "0.9.0",
"express": "4.16.2",
"execa": "0.10.0",
"express": "4.16.3",
"express-brute": "1.0.1",
"express-brute-redis": "0.0.1",
"express-session": "1.15.6",
@ -65,10 +65,10 @@
"filesize.js": "1.0.2",
"follow-redirects": "1.4.1",
"fs-extra": "5.0.0",
"graphql": "0.13.1",
"graphql": "0.13.2",
"graphql-list-fields": "2.0.1",
"graphql-tools": "2.21.0",
"i18next": "10.5.0",
"graphql-tools": "2.23.1",
"i18next": "10.5.1",
"i18next-express-middleware": "1.1.1",
"i18next-localstorage-cache": "1.1.1",
"i18next-node-fs-backend": "1.0.0",
@ -124,11 +124,11 @@
"raven": "2.4.2",
"read-chunk": "2.1.0",
"remove-markdown": "0.2.2",
"request": "2.83.0",
"request": "2.85.0",
"request-promise": "4.2.2",
"scim-query-filter-parser": "1.1.0",
"semver": "5.5.0",
"sequelize": "4.36.0",
"sequelize": "4.37.1",
"serve-favicon": "2.4.5",
"uuid": "3.2.1",
"validator": "9.4.1",
@ -138,6 +138,7 @@
},
"devDependencies": {
"@panter/vue-i18next": "0.9.1",
"@vue/cli": "3.0.0-beta.6",
"apollo-client-preset": "1.0.8",
"apollo-fetch": "0.7.0",
"apollo-link-batch-http": "1.2.1",
@ -145,7 +146,7 @@
"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-eslint": "8.2.2",
"babel-jest": "22.4.1",
"babel-jest": "23.0.0-alpha.0",
"babel-loader": "7.1.4",
"babel-plugin-graphql-tag": "1.5.0",
"babel-plugin-lodash": "3.3.2",
@ -157,12 +158,12 @@
"brace": "0.11.1",
"cache-loader": "1.2.2",
"clean-webpack-plugin": "0.1.19",
"colors": "1.2.0",
"colors": "1.2.1",
"copy-webpack-plugin": "4.5.1",
"css-loader": "0.28.10",
"css-loader": "0.28.11",
"cssnano": "4.0.0-rc.2",
"duplicate-package-checker-webpack-plugin": "2.1.0",
"eslint": "4.18.2",
"eslint": "4.19.0",
"eslint-config-requarks": "1.0.7",
"eslint-config-standard": "11.0.0",
"eslint-plugin-import": "2.9.0",
@ -181,10 +182,11 @@
"jest-junit": "3.6.0",
"js-cookie": "2.2.0",
"lodash-webpack-plugin": "0.11.4",
"mini-css-extract-plugin": "0.2.0",
"name-all-modules-plugin": "1.0.1",
"node-sass": "4.7.2",
"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-flexibility": "2.0.0",
"postcss-loader": "2.1.1",
@ -200,10 +202,10 @@
"stylus": "0.54.5",
"stylus-loader": "3.0.2",
"twemoji-awesome": "1.0.6",
"uglifyjs-webpack-plugin": "1.2.3",
"uglifyjs-webpack-plugin": "1.2.4",
"vee-validate": "2.0.5",
"velocity-animate": "1.5.1",
"vue": "2.5.15",
"vue": "2.5.16",
"vue-apollo": "3.0.0-beta.5",
"vue-clipboards": "1.2.2",
"vue-codemirror": "4.0.3",
@ -212,13 +214,14 @@
"vue-material-design-icons": "1.2.1",
"vue-router": "3.0.1",
"vue-simple-breakpoints": "1.0.3",
"vue-template-compiler": "2.5.15",
"vuetify": "1.0.6",
"vue-template-compiler": "2.5.16",
"vuetify": "1.0.8",
"vuex": "3.0.1",
"vuex-persistedstate": "2.4.2",
"webpack": "3.11.0",
"vuex-persistedstate": "2.5.1",
"webpack": "4.1.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-merge": "4.1.2",
"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='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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" />
//- 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')
block head

2260
yarn.lock
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save