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
Download Patch File Download Diff File Expand all files Collapse all files

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
})
}
})
}
}
})
]
})