Nuxt/lib/builder/webpack/client.mjs

151 lines
4.3 KiB
JavaScript
Raw Normal View History

2018-03-16 19:52:17 +00:00
import path from 'path'
2018-03-16 16:12:06 +00:00
import webpack from 'webpack'
import HTMLPlugin from 'html-webpack-plugin'
2018-03-16 19:11:24 +00:00
import BundleAnalyzer from 'webpack-bundle-analyzer'
import UglifyJsWebpackPlugin from 'uglifyjs-webpack-plugin'
import FriendlyErrorsWebpackPlugin from '@nuxtjs/friendly-errors-webpack-plugin'
2018-03-16 19:52:17 +00:00
import VueSSRClientPlugin from './plugins/vue/client'
import WebpackBaseConfig from './base'
2018-03-16 19:52:17 +00:00
export default class WebpackClientConfig extends WebpackBaseConfig {
2018-03-22 14:06:54 +00:00
constructor(builder) {
super(builder, { name: 'client', isServer: false })
}
env() {
return Object.assign(super.env(), {
'process.env.VUE_ENV': JSON.stringify('client'),
'process.browser': true,
'process.client': true,
'process.server': false
2017-08-18 08:08:43 +00:00
})
2018-03-22 14:06:54 +00:00
}
plugins() {
const plugins = super.plugins()
// Generate output HTML for SSR
if (this.options.build.ssr) {
plugins.push(
new HTMLPlugin({
filename: 'index.ssr.html',
template: 'lodash!' + this.options.appTemplatePath,
inject: false // Resources will be injected using bundleRenderer
})
)
}
2017-08-18 08:08:43 +00:00
2018-03-22 14:06:54 +00:00
plugins.push(
2017-07-11 00:24:39 +00:00
new HTMLPlugin({
2018-03-22 14:06:54 +00:00
filename: 'index.spa.html',
2018-03-22 09:11:16 +00:00
template: 'lodash!' + this.options.appTemplatePath,
2018-03-22 14:06:54 +00:00
inject: true,
chunksSortMode: 'dependency'
}),
new VueSSRClientPlugin({
filename: 'vue-ssr-client-manifest.json'
}),
new webpack.DefinePlugin(this.env())
2017-07-11 00:24:39 +00:00
)
2018-03-22 14:06:54 +00:00
if (this.options.dev) {
plugins.push(new webpack.HotModuleReplacementPlugin())
2018-03-22 16:17:24 +00:00
}
2018-03-22 14:06:54 +00:00
2018-03-22 16:17:24 +00:00
// Chunks size limit
// https://webpack.js.org/plugins/aggressive-splitting-plugin/
if (!this.options.dev && this.options.build.maxChunkSize) {
plugins.push(
new webpack.optimize.AggressiveSplittingPlugin({
minSize: this.options.build.maxChunkSize,
maxSize: this.options.build.maxChunkSize
})
)
}
// Webpack Bundle Analyzer
if (!this.options.dev && this.options.build.analyze) {
plugins.push(
new BundleAnalyzer.BundleAnalyzerPlugin(Object.assign({}, this.options.build.analyze))
)
2018-03-22 14:06:54 +00:00
}
return plugins
2017-06-15 14:53:00 +00:00
}
2017-06-15 22:19:53 +00:00
2018-03-22 14:06:54 +00:00
config() {
let config = super.config()
// Entry points
config.entry = 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|es6-promise|axios|webpack|setimediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)\//,
chunks: 'all',
priority: 10,
name: 'commons'
}
2018-01-25 08:01:48 +00:00
}
// Make uglifyjs faster
if (!this.options.dev && !config.optimization.minimizer) {
// https://github.com/webpack-contrib/uglifyjs-webpack-plugin
config.optimization.minimizer = [
new UglifyJsWebpackPlugin({
parallel: true,
cache: this.options.build.cache,
sourceMap: false
})
]
}
// Add HMR support
2018-03-22 14:06:54 +00:00
if (this.options.dev) {
config.entry = [
// https://github.com/glenjamin/webpack-hot-middleware#config
`webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=${
this.options.router.base
}/__webpack_hmr`.replace(/\/\//g, '/'),
config.entry
]
2017-06-15 22:19:53 +00:00
}
// Add friendly error plugin
if (this.options.dev) {
config.plugins.push(
new FriendlyErrorsWebpackPlugin({
clearConsole: true,
logLevel: 'WARNING'
})
)
}
2018-03-22 14:06:54 +00:00
// Extend config
if (typeof this.options.build.extend === 'function') {
const isDev = this.options.dev
const extendedConfig = this.options.build.extend.call(this.builder, config, {
isDev,
isClient: true
})
2018-03-11 21:28:56 +00:00
2018-03-22 14:06:54 +00:00
// Only overwrite config when something is returned for backwards compatibility
if (extendedConfig !== undefined) {
config = extendedConfig
}
}
2017-06-15 22:19:53 +00:00
2018-03-22 14:06:54 +00:00
return config
}
2016-11-07 01:34:58 +00:00
}