feat: webpack refactor
This commit is contained in:
parent
d3720ca008
commit
6227690c94
@ -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
3
.gitignore
vendored
@ -18,7 +18,8 @@ npm-debug.log*
|
||||
# Generated assets
|
||||
/assets
|
||||
|
||||
# Fusebox
|
||||
# Webpack
|
||||
.webpack-cache
|
||||
.fusebox
|
||||
|
||||
# Config Files
|
||||
|
2
dev/webpack/postcss.config.js
Normal file
2
dev/webpack/postcss.config.js
Normal file
@ -0,0 +1,2 @@
|
||||
module.exports = {
|
||||
}
|
201
dev/webpack/webpack.common.js
Normal file
201
dev/webpack/webpack.common.js
Normal 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'
|
||||
}
|
16
dev/webpack/webpack.dev.js
Normal file
16
dev/webpack/webpack.dev.js
Normal 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: {}
|
||||
})
|
22
dev/webpack/webpack.prod.js
Normal file
22
dev/webpack/webpack.prod.js
Normal 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')
|
||||
})
|
||||
]
|
||||
})
|
18
package.json
18
package.json
@ -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": {
|
||||
|
@ -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
|
||||
}
|
||||
})
|
Loading…
Reference in New Issue
Block a user