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

164 lines
4.5 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'
2017-06-12 20:32:34 +00:00
import base from './base.config.js'
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 () {
2017-01-09 14:10:22 +00:00
let config = base.call(this, { isClient: true })
2016-11-07 01:34:58 +00:00
2017-06-15 22:19:53 +00:00
config.name = 'client'
// Entry
2017-06-11 14:17:36 +00:00
config.entry.app = resolve(this.options.buildDir, 'client.js')
// Add vendors
2017-07-04 16:30:01 +00:00
if (this.options.store) {
config.entry.vendor.push('vuex')
}
2017-07-04 16:30:01 +00:00
config.entry.vendor = config.entry.vendor.concat(this.options.build.vendor)
// Extract vendor chunks for better caching
config.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: this.options.build.filenames.vendor,
minChunks (module) {
// 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)
)
}
})
)
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) => {
2016-11-25 14:37:06 +00:00
env['process.env.' + key] = (typeof value === 'string' ? JSON.stringify(value) : value)
})
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-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
})
)
}
// Generate output HTML for SPA
2017-06-15 22:19:53 +00:00
config.plugins.push(
new HTMLPlugin({
2017-07-11 00:24:39 +00:00
filename: 'index.spa.html',
2017-06-15 22:19:53 +00:00
template: this.options.appTemplatePath,
2017-07-11 00:24:39 +00:00
inject: true,
2017-07-02 23:53:19 +00:00
chunksSortMode: 'dependency'
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'),
'process.browser': true,
'process.server': false
}))
)
// 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-06-15 14:53:00 +00:00
// Add HMR support
2017-06-15 22:19:53 +00:00
config.entry.app = ['webpack-hot-middleware/client?name=$client&reload=true', config.entry.app]
config.output.filename = '[name].js'
config.output.chunkFilename = '[id].js'
2017-06-15 14:53:00 +00:00
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
2017-06-15 22:19:53 +00:00
// --------------------------------------
// Production specific config
// --------------------------------------
2017-06-11 14:17:36 +00:00
if (!this.options.dev) {
2017-06-15 22:19:53 +00:00
// Minify JS
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
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') {
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
})
}
2017-06-15 22:19:53 +00:00
return config
2016-11-07 01:34:58 +00:00
}