feat: webpack refactor (#3747)

* refactor: use more standard entrypoint config

* refactor: fix dev entry name

* refactor: webpack devtool and optimization
This commit is contained in:
Clark Du 2018-08-22 15:24:47 +01:00 committed by Sébastien Chopin
parent 3f7c5f64ed
commit 8230354d1b
3 changed files with 50 additions and 31 deletions

View File

@ -60,6 +60,10 @@ export default class WebpackBaseConfig {
return fileName return fileName
} }
devtool() {
return false
}
env() { env() {
const env = { const env = {
'process.mode': JSON.stringify(this.options.mode), 'process.mode': JSON.stringify(this.options.mode),
@ -85,6 +89,10 @@ export default class WebpackBaseConfig {
} }
} }
optimization() {
return this.options.build.optimization
}
alias() { alias() {
return { return {
'~': path.join(this.options.srcDir), '~': path.join(this.options.srcDir),
@ -281,7 +289,8 @@ export default class WebpackBaseConfig {
const config = { const config = {
name: this.name, name: this.name,
mode: this.options.dev ? 'development' : 'production', mode: this.options.dev ? 'development' : 'production',
optimization: {}, devtool: this.devtool(),
optimization: this.optimization(),
output: this.output(), output: this.output(),
performance: { performance: {
maxEntrypointSize: 1000 * 1024, maxEntrypointSize: 1000 * 1024,

View File

@ -23,6 +23,26 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
}) })
} }
optimization() {
const optimization = super.optimization()
// Small, known and common modules which are usually used project-wise
// Sum of them may not be more than 244 KiB
if (
this.options.build.splitChunks.commons === true &&
optimization.splitChunks.cacheGroups.commons === undefined
) {
optimization.splitChunks.cacheGroups.commons = {
test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
chunks: 'all',
priority: 10,
name: true
}
}
return optimization
}
plugins() { plugins() {
const plugins = super.plugins() const plugins = super.plugins()
@ -103,34 +123,18 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
const config = super.config() const config = super.config()
// Entry points // Entry points
config.entry = path.resolve(this.options.buildDir, 'client.js') config.entry = {
app: [path.resolve(this.options.buildDir, 'client.js')]
// -- Optimization --
config.optimization = this.options.build.optimization
// Small, known and common modules which are usually used project-wise
// Sum of them may not be more than 244 KiB
if (
this.options.build.splitChunks.commons === true &&
config.optimization.splitChunks.cacheGroups.commons === undefined
) {
config.optimization.splitChunks.cacheGroups.commons = {
test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
chunks: 'all',
priority: 10,
name: true
}
} }
// Add HMR support // Add HMR support
if (this.options.dev) { if (this.options.dev) {
config.entry = [ config.entry.app.unshift(
// https://github.com/glenjamin/webpack-hot-middleware#config // https://github.com/glenjamin/webpack-hot-middleware#config
`webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=${ `webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=${
this.options.router.base this.options.router.base
}/__webpack_hmr`.replace(/\/\//g, '/'), }/__webpack_hmr`.replace(/\/\//g, '/')
config.entry )
]
} }
// Add friendly error plugin // Add friendly error plugin

View File

@ -12,6 +12,10 @@ export default class WebpackServerConfig extends BaseConfig {
super(builder, { name: 'server', isServer: true }) super(builder, { name: 'server', isServer: true })
} }
devtool() {
return 'cheap-source-map'
}
env() { env() {
return Object.assign(super.env(), { return Object.assign(super.env(), {
'process.env.VUE_ENV': JSON.stringify('server'), 'process.env.VUE_ENV': JSON.stringify('server'),
@ -21,6 +25,13 @@ export default class WebpackServerConfig extends BaseConfig {
}) })
} }
optimization() {
return {
splitChunks: false,
minimizer: []
}
}
plugins() { plugins() {
const plugins = super.plugins() const plugins = super.plugins()
plugins.push( plugins.push(
@ -35,13 +46,12 @@ export default class WebpackServerConfig extends BaseConfig {
config() { config() {
const config = super.config() const config = super.config()
// Config devtool
config.devtool = 'cheap-source-map'
Object.assign(config, { Object.assign(config, {
target: 'node', target: 'node',
node: false, node: false,
entry: path.resolve(this.options.buildDir, 'server.js'), entry: {
app: [path.resolve(this.options.buildDir, 'server.js')]
},
output: Object.assign({}, config.output, { output: Object.assign({}, config.output, {
filename: 'server-bundle.js', filename: 'server-bundle.js',
libraryTarget: 'commonjs2' libraryTarget: 'commonjs2'
@ -50,11 +60,7 @@ export default class WebpackServerConfig extends BaseConfig {
hints: false, hints: false,
maxAssetSize: Infinity maxAssetSize: Infinity
}, },
externals: [], externals: []
optimization: {
splitChunks: false,
minimizer: []
}
}) })
// https://webpack.js.org/configuration/externals/#externals // https://webpack.js.org/configuration/externals/#externals