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

235 lines
7.0 KiB
JavaScript
Raw Normal View History

2017-06-15 22:28:08 +00:00
import { each } from 'lodash'
2017-01-11 19:14:59 +00:00
import webpack from 'webpack'
import VueSSRClientPlugin from 'vue-server-renderer/client-plugin'
import HTMLPlugin from 'html-webpack-plugin'
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
2017-02-08 13:09:59 +00:00
import ProgressBarPlugin from 'progress-bar-webpack-plugin'
2017-01-23 16:55:39 +00:00
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
2017-01-11 19:14:59 +00:00
import { resolve } from 'path'
import { existsSync } from 'fs'
import Debug from 'debug'
2017-06-12 20:32:34 +00:00
import base from './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
|--------------------------------------------------------------------------
*/
2017-06-11 14:57:39 +00:00
export default function webpackClientConfig () {
let config = base.call(this, 'client')
2017-06-15 22:19:53 +00:00
2017-08-20 18:22:01 +00:00
// App entry
2017-06-11 14:17:36 +00:00
config.entry.app = resolve(this.options.buildDir, 'client.js')
2017-08-21 19:12:41 +00:00
config.entry.common = this.vendor()
2017-07-04 16:30:01 +00:00
// Extract vendor chunks for better caching
const _this = this
const totalPages = _this.routes ? _this.routes.length : 0
2017-08-21 19:12:41 +00:00
// This well-known vendor may exist as a dependency of other requests.
const maybeVendor = [
'/core-js/',
'/regenerator-runtime/',
'/es6-promise/',
'/babel-runtime/',
'/lodash/'
]
2017-07-04 16:30:01 +00:00
config.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
2017-08-20 18:22:01 +00:00
name: 'common',
2017-07-04 16:30:01 +00:00
filename: this.options.build.filenames.vendor,
minChunks (module, count) {
// In the dev we use on-demand-entries.
// So, it makes no sense to use commonChunks based on the minChunks count.
// Instead, we move all the code in node_modules into each of the pages.
if (_this.options.dev) {
return false
}
2017-08-21 19:12:41 +00:00
// Detect and externalize well-known vendor if detected
if (module.context && maybeVendor.some(v => module.context.includes(v))) {
2017-08-20 18:22:01 +00:00
return true
}
2017-07-04 16:30:01 +00:00
// 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
!/\.(css|less|scss|sass|styl|stylus)$/.test(module.request) &&
// Used in at-least 1/2 of the total pages
(totalPages <= 2 ? count >= totalPages : count >= totalPages * 0.5)
2017-07-04 16:30:01 +00:00
)
}
})
)
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) => {
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
// Webpack common plugins
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
2017-06-15 22:19:53 +00:00
if (!Array.isArray(config.plugins)) {
config.plugins = []
}
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,
2017-03-25 23:52:39 +00:00
filename: this.options.build.filenames.manifest
2016-11-07 01:34:58 +00:00
})
2017-06-15 22:19:53 +00:00
)
// Define Env
config.plugins.push(
new webpack.DefinePlugin(Object.assign(env, {
'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV || (this.options.dev ? 'development' : 'production')),
'process.env.VUE_ENV': JSON.stringify('client'),
2017-08-23 16:21:27 +00:00
'process.mode': JSON.stringify(this.options.mode),
2017-06-15 22:19:53 +00:00
'process.browser': true,
2017-08-17 12:43:51 +00:00
'process.server': false,
'process.static': this.isStatic
2017-06-15 22:19:53 +00:00
}))
)
// Build progress bar
2017-02-08 13:09:59 +00:00
config.plugins.push(
new ProgressBarPlugin()
)
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 22:19:53 +00:00
// Add friendly error plugin
config.plugins.push(new FriendlyErrorsWebpackPlugin())
2017-06-15 22:19:53 +00:00
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
2017-09-11 20:35:09 +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
// https://github.com/webpack/webpack/tree/master/examples/dll-user
if (this.options.build.dll) {
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
})
)
}
})
2017-08-21 19:40:06 +00:00
if (_dlls.length) {
debug('Using dll for ' + _dlls.join(','))
}
}
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
config.plugins.push(
2017-08-30 15:06:16 +00:00
// new webpack.optimize.ModuleConcatenationPlugin()
)
// 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
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
2017-08-19 11:10:01 +00:00
extractComments: {
filename: 'LICENSES'
},
compress: {
warnings: false
}
})
)
2017-06-15 22:19:53 +00:00
// Webpack Bundle Analyzer
if (this.options.build.analyze) {
config.plugins.push(
new BundleAnalyzerPlugin(Object.assign({}, this.options.build.analyze))
)
}
}
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 extendedConfig = this.options.build.extend.call(this, config, {
2017-06-11 14:17:36 +00:00
dev: this.options.dev,
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
}