feat: webpack refactor

This commit is contained in:
NGPixel 2018-01-26 00:32:53 -05:00
parent d3720ca008
commit 6227690c94
9 changed files with 489 additions and 1600 deletions

View File

@ -5,7 +5,9 @@ env:
node: true
jest: true
parserOptions:
parser: babel-eslint
ecmaVersion: 2017
allowImportExportEverywhere: true
globals:
document: false
navigator: false

3
.gitignore vendored
View File

@ -18,7 +18,8 @@ npm-debug.log*
# Generated assets
/assets
# Fusebox
# Webpack
.webpack-cache
.fusebox
# Config Files

View File

@ -0,0 +1,2 @@
module.exports = {
}

View File

@ -0,0 +1,201 @@
const path = require('path')
const fs = require('fs-extra')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
module.exports = {
entry: './client/index.js',
output: {
path: path.join(process.cwd(), 'assets'),
pathinfo: true,
filename: 'js/[name].js',
chunkFilename: 'js/[name].chunk.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'cache-loader',
options: {
cacheDirectory: '.webpack-cache'
}
},
{
loader: 'babel-loader',
options: {
...babelConfig,
cacheDirectory: true
}
}
]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
autoprefixer: false,
sourceMap: false,
minimize: true
}
}
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
autoprefixer: false,
sourceMap: false,
minimize: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
})
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader',
options: {
autoprefixer: false,
sourceMap: false,
minimize: true
}
}
],
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader',
options: {
autoprefixer: false,
sourceMap: false,
minimize: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-resources-loader',
options: {
resources: path.join(process.cwd(), '/client/scss/global.scss')
}
}
],
js: {
loader: 'babel-loader',
options: {
babelrc: path.join(process.cwd(), '.babelrc'),
cacheDirectory: true
}
}
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.svg$/,
exclude: [
path.join(process.cwd(), 'client/svg')
],
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'svg/'
}
}
]
},
{
test: /\.svg$/,
include: [
path.join(process.cwd(), 'client/svg')
],
use: [
{
loader: 'raw-loader'
}
]
}
]
},
plugins: [
new ProgressBarPlugin({
width: 72,
complete: '▇',
incomplete: '-'
}),
new webpack.BannerPlugin('Wiki.js - wiki.js.org - Licensed under AGPL'),
new CopyWebpackPlugin([
{ from: 'client/static' }
], {
}),
new ExtractTextPlugin('css/bundle.css')
],
resolve: {
symlinks: true,
alias: {
'@': path.join(process.cwd(), 'client'),
'vue$': 'vue/dist/vue.common.js'
},
extensions: [
'.js',
'.json',
'.vue'
],
modules: [
'node_modules'
]
},
target: 'web'
}

View File

@ -0,0 +1,16 @@
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
module: {
rules: []
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
resolve: {}
})

View File

@ -0,0 +1,22 @@
const webpack = require('webpack')
const merge = require('webpack-merge')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const common = require('./webpack.common.js')
console.info(process.cwd())
module.exports = merge(common, {
module: {
rules: []
},
plugins: [
new CleanWebpackPlugin(['assets'], { root: process.cwd() }),
new UglifyJSPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
})

View File

@ -7,7 +7,7 @@
"start": "node wiki start",
"stop": "node wiki stop",
"restart": "node wiki restart",
"build": "poi build",
"build": "webpack --config dev/webpack/webpack.prod.js",
"build:analyze": "poi build --analyze",
"dev:client": "poi watch",
"dev:server": "nodemon",
@ -144,13 +144,19 @@
"autoprefixer": "7.2.3",
"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-eslint": "8.2.1",
"babel-jest": "22.0.4",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-2": "6.24.1",
"brace": "0.11.0",
"cache-loader": "1.2.0",
"clean-webpack-plugin": "0.1.17",
"colors": "1.1.2",
"consolidate": "0.15.0",
"copy-webpack-plugin": "4.3.1",
"css-loader": "0.28.9",
"eslint": "4.13.1",
"eslint-config-requarks": "1.0.7",
"eslint-config-standard": "11.0.0-beta.0",
@ -159,7 +165,8 @@
"eslint-plugin-promise": "3.6.0",
"eslint-plugin-standard": "3.0.1",
"eslint-plugin-vue": "3.13.1",
"fuse-box": "2.5.0-beta.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"graphql-tag": "^2.6.1",
"i18next-xhr-backend": "1.5.0",
"intl": "1.2.5",
@ -169,20 +176,23 @@
"node-dev": "3.1.3",
"node-sass": "4.7.2",
"nodemon": "1.14.3",
"poi": "9.6.12",
"postcss-selector-parser": "3.1.1",
"progress-bar-webpack-plugin": "1.10.0",
"pug-lint": "2.5.0",
"raw-loader": "0.5.1",
"sass-loader": "6.0.6",
"sass-resources-loader": "1.3.1",
"style-loader": "0.19.1",
"svg-sprite-loader": "3.6.2",
"twemoji-awesome": "1.0.6",
"typescript": "2.6.2",
"uglify-es": "3.2.2",
"uglifyjs-webpack-plugin": "1.1.6",
"vee-validate": "2.0.0-rc.27",
"vue": "2.5.13",
"vue-clipboards": "1.2.0",
"vue-hot-reload-api": "2.2.4",
"vue-loader": "13.7.0",
"vue-lodash": "1.0.4",
"vue-material": "^0.8.1",
"vue-resource": "1.3.5",
@ -191,7 +201,9 @@
"vue-template-es2015-compiler": "1.6.0",
"vuex": "3.0.1",
"vuex-persistedstate": "2.4.2",
"webpack": "3.10.0",
"webpack-bundle-analyzer": "2.9.2",
"webpack-merge": "4.1.1",
"whatwg-fetch": "2.0.3"
},
"jest": {

View File

@ -1,83 +0,0 @@
const path = require('path')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
// const _ = require('lodash')
// const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
module.exports = options => ({
entry: 'client/index.js',
dist: 'assets',
staticFolder: 'client/static',
filename: {
js: 'js/[name].js',
css: 'css/bundle.css',
images: 'images/[name].[ext]',
fonts: 'fonts/[name].[ext]',
chunk: 'js/[name].chunk.js'
},
autoprefixer: {
browsers: [
'last 6 Chrome major versions',
'last 6 Firefox major versions',
'last 4 Safari major versions',
'last 4 Edge major versions',
'last 3 iOS major versions',
'last 3 Android major versions',
'last 2 ChromeAndroid major versions',
'Explorer 11'
]
},
html: false,
hash: false,
sourceMap: false,
extendWebpack (config) {
// Vue - Default SCSS Imports
config.module.rule('vue')
.use('vue-loader')
.tap(opts => {
opts.loaders.scss.push({
loader: 'sass-resources-loader',
options: {
resources: path.join(__dirname, './client/scss/global.scss')
}
})
return opts
})
// SVG Loader
config.module.rule('svg')
.exclude.add(path.join(__dirname, './client/svg')).end()
.use('file-loader')
.tap(opts => {
opts.name = '[name].[ext]'
opts.outputPath = 'svg/'
return opts
})
config.module.rule('svgSymbols')
.include.add(path.join(__dirname, './client/svg')).end()
.use('raw-loader')
.loader('raw-loader')
// config.module.rule('svg').uses.delete('file-loader')
// config.module.rule('svg')
// .use('svg-sprite-loader')
// .loader('svg-sprite-loader', {
// extract: true,
// spriteFilename: 'svg/symbols.svg'
// })
// config.plugin('svg-sprite-loader')
// .use(SpriteLoaderPlugin)
// Vue with Compiler Alias
config.resolve.alias.set('vue$', 'vue/dist/vue.common.js')
// Bundle Analyze
if (options.analyze) {
config.plugin('analyzer').use(BundleAnalyzerPlugin, [{
analyzerMode: 'static'
}])
}
},
webpack (config) {
return config
}
})

1742
yarn.lock

File diff suppressed because it is too large Load Diff