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

282 lines
8.4 KiB
JavaScript
Raw Normal View History

const { each } = require('lodash')
const webpack = require('webpack')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const HTMLPlugin = require('html-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
2017-12-12 11:46:19 +00:00
const ProgressPlugin = require('webpack/lib/ProgressPlugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const { resolve } = require('path')
const { existsSync } = require('fs')
const Debug = require('debug')
2017-12-12 11:46:19 +00:00
const Chalk = require('chalk')
2018-01-13 05:22:11 +00:00
const { printWarn } = require('../../common/utils')
const base = require('./base.config.js')
const debug = Debug('nuxt:build')
debug.color = 2 // Force green color
2016-11-07 01:34:58 +00:00
/*
|--------------------------------------------------------------------------
| Webpack Client Config
|
| Generate public/dist/client-vendor-bundle.js
| Generate public/dist/client-bundle.js
|
| In production, will generate public/dist/style.css
|--------------------------------------------------------------------------
*/
module.exports = function webpackClientConfig() {
let config = base.call(this, { name: 'client', isServer: false })
2017-06-15 22:19:53 +00:00
// Entry points
2017-06-11 14:17:36 +00:00
config.entry.app = resolve(this.options.buildDir, 'client.js')
config.entry.vendor = this.vendor()
2018-01-04 23:34:20 +00:00
// Config devtool
config.devtool = this.options.dev ? 'cheap-source-map' : false
config.output.devtoolModuleFilenameTemplate = '[absolute-resource-path]'
2017-11-10 21:46:37 +00:00
// Add CommonChunks plugin
commonChunksPlugin.call(this, config)
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 = {}
2017-01-11 19:14:59 +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,
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
})
)
}
2017-06-15 22:19:53 +00:00
// Generate vue-ssr-client-manifest
config.plugins.push(
new VueSSRClientPlugin({
filename: 'vue-ssr-client-manifest.json'
})
)
// Extract webpack runtime & manifest
config.plugins.push(
2017-03-25 23:52:39 +00:00
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity,
filename: this.getFileName('manifest')
2016-11-07 01:34:58 +00:00
})
2017-06-15 22:19:53 +00:00
)
// Define Env
config.plugins.push(
2018-01-13 05:22:11 +00:00
new webpack.DefinePlugin(
Object.assign(env, {
'process.env.NODE_ENV': JSON.stringify(
this.options.env.NODE_ENV || (this.options.dev ? 'development' : 'production')
2018-01-13 05:22:11 +00:00
),
'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
)
// Build progress bar
2017-12-12 11:46:19 +00:00
if (this.options.build.profile) {
2018-01-13 05:22:11 +00:00
config.plugins.push(
new ProgressPlugin({
profile: true
})
)
2017-12-12 11:46:19 +00:00
} else {
2018-01-13 05:22:11 +00:00
config.plugins.push(
new ProgressBarPlugin({
complete: Chalk.green('█'),
incomplete: Chalk.white('█'),
format: ' :bar ' + Chalk.green.bold(':percent') + ' :msg',
clear: false
})
)
2017-12-12 11:46:19 +00:00
}
2017-06-15 22:19:53 +00:00
2018-01-13 05:22:11 +00:00
const shouldClearConsole =
this.options.build.stats !== false &&
this.options.build.stats !== 'errors-only'
2017-12-13 06:53:32 +00:00
// Add friendly error plugin
2018-01-13 05:22:11 +00:00
config.plugins.push(
new FriendlyErrorsWebpackPlugin({ clearConsole: shouldClearConsole })
)
2017-12-13 06:53:32 +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-08-16 10:36:27 +00:00
// https://webpack.js.org/plugins/named-modules-plugin
config.plugins.push(new webpack.NamedModulesPlugin())
2017-06-15 14:53:00 +00:00
// Add HMR support
2017-08-25 12:01:16 +00:00
config.entry.app = [
// 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, '/'),
2017-08-25 12:01:16 +00:00
config.entry.app
]
2017-06-15 14:53:00 +00:00
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
// DllReferencePlugin
if (this.options.build.dll) {
dllPlugin.call(this, config)
}
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) {
// Scope Hoisting
if (this.options.build.scopeHoisting === true) {
config.plugins.push(new webpack.optimize.ModuleConcatenationPlugin())
}
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
})
)
}
// https://webpack.js.org/plugins/hashed-module-ids-plugin
config.plugins.push(new webpack.HashedModuleIdsPlugin())
2017-06-15 22:19:53 +00:00
// Minify JS
2017-08-19 11:10:01 +00:00
// https://github.com/webpack-contrib/uglifyjs-webpack-plugin
2017-11-24 15:32:05 +00:00
if (this.options.build.uglify !== false) {
config.plugins.push(
2018-01-13 05:22:11 +00:00
new UglifyJSPlugin(
Object.assign(
{
// cache: true,
sourceMap: true,
parallel: true,
extractComments: {
filename: 'LICENSES'
},
uglifyOptions: {
output: {
comments: /^\**!|@preserve|@license|@cc_on/
}
}
},
this.options.build.uglify
)
)
2017-11-24 15:32:05 +00:00
)
}
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(
new BundleAnalyzerPlugin(Object.assign({}, this.options.build.analyze))
)
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, {
get dev() {
2018-01-13 05:22:11 +00:00
printWarn('dev has been deprecated in build.extend(), please use isDev')
return isDev
},
isDev,
2016-12-27 13:54:10 +00:00
isClient: true
})
// 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
}
// --------------------------------------------------------------------------
// Adds Common Chunks Plugin
// --------------------------------------------------------------------------
function commonChunksPlugin(config) {
// Create explicit vendor chunk
config.plugins.unshift(
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: this.getFileName('vendor'),
minChunks(module, count) {
// A module is extracted into the vendor chunk when...
return (
// If it's inside node_modules
/node_modules/.test(module.context) &&
// Do not externalize if the request is a CSS file or a Vue file which can potentially emit CSS assets!
!/\.(css|less|scss|sass|styl|stylus|vue)$/.test(module.request)
)
}
})
)
}
// --------------------------------------------------------------------------
// Adds DLL plugin
// https://github.com/webpack/webpack/tree/master/examples/dll-user
// --------------------------------------------------------------------------
function dllPlugin(config) {
const _dlls = []
const vendorEntries = this.vendorEntries()
const dllDir = resolve(this.options.cacheDir, config.name + '-dll')
Object.keys(vendorEntries).forEach(v => {
const dllManifestFile = resolve(dllDir, v + '-manifest.json')
if (existsSync(dllManifestFile)) {
_dlls.push(v)
config.plugins.push(
new webpack.DllReferencePlugin({
// context: this.options.rootDir,
manifest: dllManifestFile // Using full path to allow finding .js dll file
})
)
}
})
if (_dlls.length) {
debug('Using dll for ' + _dlls.join(','))
}
}