Nuxt/lib/builder/webpack/client.config.mjs

204 lines
5.8 KiB
JavaScript
Raw Normal View History

2018-03-16 19:52:17 +00:00
import path from 'path'
2018-03-16 19:11:24 +00:00
import _ from 'lodash'
2018-03-16 16:12:06 +00:00
import webpack from 'webpack'
2018-03-19 15:31:32 +00:00
2018-03-16 16:12:06 +00:00
import HTMLPlugin from 'html-webpack-plugin'
import StylishPlugin from 'webpack-stylish'
2018-03-16 19:11:24 +00:00
import BundleAnalyzer from 'webpack-bundle-analyzer'
2018-03-20 10:09:47 +00:00
import HtmlWebpackInlineSourcePlugin from 'html-webpack-inline-source-plugin'
2018-03-16 19:52:17 +00:00
2018-03-16 16:12:06 +00:00
import Debug from 'debug'
2018-03-16 19:11:24 +00:00
import base from './base.config'
2018-03-16 19:52:17 +00:00
// import VueSSRClientPlugin from 'vue-server-renderer/client-plugin'
import VueSSRClientPlugin from './plugins/vue/client'
const debug = Debug('nuxt:build')
debug.color = 2 // Force green color
2018-03-17 09:34:33 +00:00
/*
|--------------------------------------------------------------------------
| Webpack Client Config
|--------------------------------------------------------------------------
*/
2018-03-16 16:12:06 +00:00
export default function webpackClientConfig() {
let config = base.call(this, { name: 'client', isServer: false })
2017-06-15 22:19:53 +00:00
// Entry points
2018-03-17 10:26:17 +00:00
config.entry = path.resolve(this.options.buildDir, 'client.js')
2017-06-15 22:19:53 +00:00
// Env object defined in nuxt.config.js
2016-11-25 14:37:06 +00:00
let env = {}
2018-03-16 19:11:24 +00:00
_.each(this.options.env, (value, key) => {
2018-01-13 05:22:11 +00:00
env['process.env.' + key] =
['boolean', 'number'].indexOf(typeof value) !== -1
? value
: JSON.stringify(value)
2016-11-25 14:37:06 +00:00
})
2017-06-15 22:19:53 +00:00
2017-08-18 08:08:43 +00:00
// Generate output HTML for SPA
config.plugins.push(
new HTMLPlugin({
filename: 'index.spa.html',
template: this.options.appTemplatePath,
inject: true,
2018-03-20 10:09:47 +00:00
inlineSource: /runtime.*\.js$/,
2017-08-18 08:08:43 +00:00
chunksSortMode: 'dependency'
})
)
2017-07-11 00:24:39 +00:00
// Generate output HTML for SSR
if (this.options.build.ssr) {
config.plugins.push(
new HTMLPlugin({
filename: 'index.ssr.html',
template: this.options.appTemplatePath,
inject: false // Resources will be injected using bundleRenderer
})
)
}
2018-03-20 10:09:47 +00:00
// Enhances html-webpack-plugin functionality by adding the inlineSource option.
// https://github.com/DustinJackson/html-webpack-inline-source-plugin
if (!this.options.dev) {
config.plugins.push(new HtmlWebpackInlineSourcePlugin())
}
2018-03-20 10:09:47 +00:00
2017-06-15 22:19:53 +00:00
// Generate vue-ssr-client-manifest
config.plugins.push(
new VueSSRClientPlugin({
filename: 'vue-ssr-client-manifest.json'
})
)
// Define Env
config.plugins.push(
2018-01-13 05:22:11 +00:00
new webpack.DefinePlugin(
Object.assign(env, {
'process.env.VUE_ENV': JSON.stringify('client'),
'process.mode': JSON.stringify(this.options.mode),
'process.browser': true,
'process.client': true,
'process.server': false,
'process.static': this.isStatic
})
)
2017-06-15 22:19:53 +00:00
)
// -- Optimization --
config.optimization = this.options.build.optimization
// TODO: remove spa check after https://github.com/jantimon/html-webpack-plugin/issues/878 solved
if (this.options.dev || this.options.mode === 'spa') {
config.optimization.splitChunks.name = true
}
// ... Explicit cache groups
// Vue.js core modules
if (this.options.build.splitChunks.vue) {
config.optimization.splitChunks.cacheGroups.vue = {
test: /node_modules\/(vue|vue-loader|vue-router|vuex|vue-meta)\//,
chunks: 'initial',
name: 'vue',
priority: 10,
enforce: true
}
}
// Common modules which are usually included in projects
if (this.options.build.splitChunks.common) {
config.optimization.splitChunks.cacheGroups.common = {
test: /node_modules\/(core-js|babel-runtime|lodash|es6-promise|moment|axios|webpack|setimediate|timers-browserify|process)\//,
chunks: 'initial',
name: 'common',
priority: 9
}
}
// Generated templates
if (this.options.build.splitChunks.main) {
config.optimization.splitChunks.cacheGroups.main = {
test: /\.nuxt\//,
chunks: 'initial',
name: 'main',
priority: 8
}
}
// Other vendors inside node_modules
if (this.options.build.splitChunks.vendor) {
config.optimization.splitChunks.cacheGroups.vendor = {
test: /node_modules\//,
chunks: 'initial',
name: 'vendor',
priority: 8
2018-03-11 21:28:56 +00:00
}
}
2018-03-17 09:34:33 +00:00
// Create additional runtime chunk for cache boosting
config.optimization.runtimeChunk = this.options.build.splitChunks.runtime
2018-03-17 09:34:33 +00:00
2017-06-15 22:19:53 +00:00
// --------------------------------------
// Dev specific config
// --------------------------------------
2017-06-11 14:17:36 +00:00
if (this.options.dev) {
2017-06-15 14:53:00 +00:00
// Add HMR support
2018-03-17 07:23:00 +00:00
config.entry = [
2017-08-25 12:01:16 +00:00
// https://github.com/glenjamin/webpack-hot-middleware#config
2018-01-13 05:22:11 +00:00
`webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=${
this.options.router.base
}/__webpack_hmr`.replace(/\/\//g, '/'),
2018-03-17 07:23:00 +00:00
config.entry
2017-08-25 12:01:16 +00:00
]
// HMR
config.plugins.push(new webpack.HotModuleReplacementPlugin())
2017-06-15 14:53:00 +00:00
}
2017-06-15 22:19:53 +00:00
// --------------------------------------
// Production specific config
// --------------------------------------
2017-06-11 14:17:36 +00:00
if (!this.options.dev) {
2018-01-25 08:01:48 +00:00
// Chunks size limit
// https://webpack.js.org/plugins/aggressive-splitting-plugin/
if (this.options.build.maxChunkSize) {
config.plugins.push(
new webpack.optimize.AggressiveSplittingPlugin({
minSize: this.options.build.maxChunkSize,
maxSize: this.options.build.maxChunkSize
})
)
}
2018-03-13 12:06:12 +00:00
// https://github.com/webpack-contrib/webpack-stylish
2018-03-18 08:51:56 +00:00
if (!this.options.dev && !this.options.test) {
2018-03-13 12:06:12 +00:00
config.plugins.push(new StylishPlugin())
}
2017-06-15 22:19:53 +00:00
// Webpack Bundle Analyzer
if (this.options.build.analyze) {
2018-01-13 05:22:11 +00:00
config.plugins.push(
2018-03-16 19:11:24 +00:00
new BundleAnalyzer.BundleAnalyzerPlugin(Object.assign({}, this.options.build.analyze))
2018-01-13 05:22:11 +00:00
)
2017-06-15 22:19:53 +00:00
}
}
2017-06-15 22:19:53 +00:00
2016-12-27 13:54:10 +00:00
// Extend config
if (typeof this.options.build.extend === 'function') {
const isDev = this.options.dev
const extendedConfig = this.options.build.extend.call(this, config, {
isDev,
2016-12-27 13:54:10 +00:00
isClient: true
})
2018-03-11 21:28:56 +00:00
// Only overwrite config when something is returned for backwards compatibility
if (extendedConfig !== undefined) {
config = extendedConfig
}
2016-12-27 13:54:10 +00:00
}
2017-06-15 22:19:53 +00:00
return config
2016-11-07 01:34:58 +00:00
}