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

168 lines
4.9 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'
import MiniCssExtractPlugin from 'mini-css-extract-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',
2018-03-22 09:11:16 +00:00
template: 'lodash!' + this.options.appTemplatePath,
2017-08-18 08:08:43 +00:00
inject: true,
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',
2018-03-22 09:11:16 +00:00
template: 'lodash!' + this.options.appTemplatePath,
2017-07-11 00:24:39 +00:00
inject: false // Resources will be injected using bundleRenderer
})
)
}
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
2018-03-21 10:03:57 +00:00
// 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|es6-promise|axios|webpack|setimediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)\//,
chunks: 'all',
priority: 10,
2018-03-21 10:03:57 +00:00
name: 'commons'
}
}
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
// CSS extraction
const extractCSS = this.options.build.extractCSS
if (extractCSS) {
config.plugins.push(new MiniCssExtractPlugin(Object.assign({
filename: this.getFileName('css')
}, typeof extractCSS === 'object' ? extractCSS : {})))
}
return config
2016-11-07 01:34:58 +00:00
}