Nuxt/lib/builder/webpack/client.js

179 lines
5.4 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 TerserWebpackPlugin from 'terser-webpack-plugin'
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-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 })
}
getFileName(...args) {
if (this.options.build.analyze) {
const key = args[0]
if (['app', 'chunk'].includes(key)) {
return '[name].js'
}
}
return super.getFileName(...args)
}
2018-03-22 14:06:54 +00:00
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
}
optimization() {
const optimization = super.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 &&
optimization.splitChunks.cacheGroups.commons === undefined
) {
optimization.splitChunks.cacheGroups.commons = {
test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
chunks: 'all',
priority: 10,
name: true
}
}
return optimization
}
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: '../server/index.ssr.html',
template: this.options.appTemplatePath,
minify: this.options.build.html.minify,
2018-03-22 14:06:54 +00:00
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({
filename: '../server/index.spa.html',
template: this.options.appTemplatePath,
minify: this.options.build.html.minify,
2018-03-22 14:06:54 +00:00
inject: true,
chunksSortMode: 'dependency'
}),
new VueSSRClientPlugin({
filename: '../server/vue-ssr-client-manifest.json'
2018-03-22 14:06:54 +00:00
}),
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) {
// TODO: webpackHotUpdate is not defined: https://github.com/webpack/webpack/issues/6693
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
// Webpack Bundle Analyzer
// https://github.com/webpack-contrib/webpack-bundle-analyzer
2018-03-22 16:17:24 +00:00
if (!this.options.dev && this.options.build.analyze) {
const statsDir = path.resolve(this.options.buildDir, 'stats')
plugins.push(new BundleAnalyzer.BundleAnalyzerPlugin(Object.assign({
analyzerMode: 'static',
defaultSizes: 'gzip',
generateStatsFile: true,
2018-08-12 12:39:43 +00:00
openAnalyzer: !this.options.build.quiet,
reportFilename: path.resolve(statsDir, 'client.html'),
statsFilename: path.resolve(statsDir, 'client.json')
}, 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
extendConfig() {
const config = super.extendConfig(...arguments)
// Add minimizer plugins
if (config.optimization.minimize && config.optimization.minimizer === undefined) {
config.optimization.minimizer = []
// https://github.com/webpack-contrib/terser-webpack-plugin
if (this.options.build.terser) {
config.optimization.minimizer.push(
new TerserWebpackPlugin(Object.assign({
parallel: true,
cache: this.options.build.cache,
sourceMap: config.devtool && /source-?map/.test(config.devtool),
extractComments: {
filename: 'LICENSES'
},
terserOptions: {
output: {
comments: /^\**!|@preserve|@license|@cc_on/
}
}
}, this.options.build.terser))
)
}
// https://github.com/NMFR/optimize-css-assets-webpack-plugin
// https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production
// TODO: Remove OptimizeCSSAssetsPlugin when upgrading to webpack 5
if (this.options.build.optimizeCSS) {
config.optimization.minimizer.push(
new OptimizeCSSAssetsPlugin(Object.assign({}, this.options.build.optimizeCSS))
)
}
}
return config
}
2018-03-22 14:06:54 +00:00
config() {
const config = super.config()
2018-03-22 14:06:54 +00:00
// Entry points
config.entry = {
app: [path.resolve(this.options.buildDir, 'client.js')]
2018-01-25 08:01:48 +00:00
}
// Add HMR support
2018-03-22 14:06:54 +00:00
if (this.options.dev) {
config.entry.app.unshift(
2018-03-22 14:06:54 +00:00
// 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, '/')
)
2017-06-15 22:19:53 +00:00
}
// Add friendly error plugin
2018-08-12 12:39:43 +00:00
if (this.options.dev && !this.options.build.quiet) {
config.plugins.push(
new FriendlyErrorsWebpackPlugin({
clearConsole: true,
logLevel: 'WARNING'
})
)
}
return config
}
2016-11-07 01:34:58 +00:00
}