Nuxt/lib/builder/webpack/base.js

283 lines
7.6 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 TimeFixPlugin from 'time-fix-plugin'
2018-03-16 19:11:24 +00:00
import _ from 'lodash'
2018-03-22 09:11:16 +00:00
import VueLoader from 'vue-loader'
2018-03-23 16:28:35 +00:00
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
2018-03-24 13:02:04 +00:00
import WebpackBar from 'webpackbar'
2018-03-16 16:12:06 +00:00
import { isUrl, urlJoin } from '../../common/utils'
import StyleLoader from './utils/style-loader'
2018-03-16 19:52:17 +00:00
import WarnFixPlugin from './plugins/warnfix'
import StatsPlugin from './plugins/stats'
2016-11-07 01:34:58 +00:00
2018-03-22 14:06:54 +00:00
export default class WebpackBaseConfig {
constructor(builder, options) {
this.name = options.name
this.isServer = options.isServer
this.builder = builder
this.nuxt = this.builder.nuxt
2018-03-22 14:06:54 +00:00
this.isStatic = builder.isStatic
this.options = builder.options
this.spinner = builder.spinner
}
getBabelOptions() {
const options = _.clone(this.options.build.babel)
if (typeof options.presets === 'function') {
options.presets = options.presets({ isServer: this.isServer })
}
if (!options.babelrc && !options.presets) {
options.presets = [
[
this.builder.nuxt.resolvePath('babel-preset-vue-app'),
{
targets: this.isServer ? { node: '8.0.0' } : { ie: 9, uglify: true }
}
]
]
}
return options
}
getFileName(name) {
let fileName = this.options.build.filenames[name]
// Don't use hashes when watching
// https://github.com/webpack/webpack/issues/1914#issuecomment-174171709
if (this.options.dev) {
fileName = fileName.replace(/\[(chunkhash|contenthash|hash)\]\./g, '')
}
// Don't use [name] for production assets
if (!this.options.dev && this.options.build.optimization.splitChunks.name !== true) {
fileName = fileName.replace(/\[name\]\./g, '')
}
2018-03-22 14:06:54 +00:00
return fileName
}
env() {
const env = {
'process.mode': JSON.stringify(this.options.mode),
'process.static': this.isStatic
}
_.each(this.options.env, (value, key) => {
env['process.env.' + key] =
['boolean', 'number'].indexOf(typeof value) !== -1
? value
: JSON.stringify(value)
})
return env
}
output() {
return {
2018-03-16 19:11:24 +00:00
path: path.resolve(this.options.buildDir, 'dist'),
filename: this.getFileName('app'),
chunkFilename: this.getFileName('chunk'),
publicPath: isUrl(this.options.build.publicPath)
2017-06-11 14:17:36 +00:00
? this.options.build.publicPath
: urlJoin(this.options.router.base, this.options.build.publicPath)
2018-03-22 14:06:54 +00:00
}
2016-11-07 01:34:58 +00:00
}
2017-06-15 22:19:53 +00:00
2018-03-22 14:06:54 +00:00
alias() {
return {
'~': path.join(this.options.srcDir),
'~~': path.join(this.options.rootDir),
'@': path.join(this.options.srcDir),
'@@': path.join(this.options.rootDir),
[this.options.dir.assets]: path.join(
this.options.srcDir,
this.options.dir.assets
),
[this.options.dir.static]: path.join(
this.options.srcDir,
this.options.dir.static
)
}
}
2018-03-22 14:06:54 +00:00
rules() {
const styleLoader = new StyleLoader(
this.options,
this.builder.nuxt,
{ isServer: this.isServer }
)
const perfLoader = this.builder.perfLoader
2018-03-22 14:06:54 +00:00
return [
{
test: /\.vue$/,
loader: 'vue-loader',
options: Object.assign({
productionMode: !this.options.dev,
transformAssetUrls: {
video: 'src',
source: 'src',
object: 'src',
embed: 'src'
}
}, this.options.build.vueLoader)
2018-03-22 14:06:54 +00:00
},
2018-04-21 07:27:48 +00:00
{
test: /\.pug$/,
oneOf: [
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
{
use: ['raw-loader', 'pug-plain-loader']
}
]
},
2018-03-22 14:06:54 +00:00
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: perfLoader.pool('js', {
loader: 'babel-loader',
options: this.getBabelOptions()
})
},
{
test: /\.css$/,
2018-03-29 19:26:42 +00:00
oneOf: perfLoader.poolOneOf('css', styleLoader.apply('css'))
},
{
test: /\.less$/,
2018-03-29 19:26:42 +00:00
oneOf: perfLoader.poolOneOf('css', styleLoader.apply('less', 'less-loader'))
2018-03-22 14:06:54 +00:00
},
{
test: /\.sass$/,
2018-03-29 19:26:42 +00:00
oneOf: perfLoader.poolOneOf('css', styleLoader.apply('sass', {
2018-03-22 14:06:54 +00:00
loader: 'sass-loader',
options: { indentedSyntax: true }
}))
2018-03-22 14:06:54 +00:00
},
{
test: /\.scss$/,
2018-03-29 19:26:42 +00:00
oneOf: perfLoader.poolOneOf('css', styleLoader.apply('scss', 'sass-loader'))
},
2018-03-22 14:06:54 +00:00
{
test: /\.styl(us)?$/,
2018-03-29 19:26:42 +00:00
oneOf: perfLoader.poolOneOf('css', styleLoader.apply('stylus', 'stylus-loader'))
2018-03-22 14:06:54 +00:00
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: perfLoader.pool('assets', {
loader: 'url-loader',
options: {
limit: 1000, // 1KO
name: 'img/[name].[hash:7].[ext]'
}
})
2018-03-22 14:06:54 +00:00
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: perfLoader.pool('assets', {
loader: 'url-loader',
options: {
limit: 1000, // 1 KO
name: 'fonts/[name].[hash:7].[ext]'
}
})
2018-03-22 14:06:54 +00:00
},
{
test: /\.(webm|mp4)$/,
use: perfLoader.pool('assets', {
loader: 'file-loader',
options: {
name: 'videos/[name].[hash:7].[ext]'
}
})
}
2018-03-22 14:06:54 +00:00
]
}
plugins() {
const plugins = [ new VueLoader.VueLoaderPlugin() ]
Array.prototype.push.apply(plugins, this.options.build.plugins || [])
// Add timefix-plugin before others plugins
if (this.options.dev) {
plugins.unshift(new TimeFixPlugin())
2018-03-18 08:51:56 +00:00
}
2018-03-11 21:28:56 +00:00
2018-03-22 14:06:54 +00:00
// Hide warnings about plugins without a default export (#1179)
plugins.push(new WarnFixPlugin())
2018-03-22 16:22:41 +00:00
// Build progress indicator
2018-03-31 16:22:14 +00:00
plugins.push(new WebpackBar({
profile: this.options.build.profile,
name: this.isServer ? 'server' : 'client',
color: this.isServer ? 'orange' : 'green',
compiledIn: false,
done: (states) => {
2018-03-31 16:22:14 +00:00
if (this.options.dev) {
const hasErrors = Object.values(states).some(state => state.stats.hasErrors())
if (!hasErrors) {
this.nuxt.showReady()
}
}
2018-03-31 16:22:14 +00:00
}
}))
2018-03-22 14:06:54 +00:00
2018-03-22 16:22:41 +00:00
// Add stats plugin
if (!this.options.dev && this.options.build.stats) {
2018-03-22 14:06:54 +00:00
plugins.push(new StatsPlugin(this.options.build.stats))
2018-03-22 16:22:41 +00:00
}
2017-06-15 22:19:53 +00:00
2018-03-23 16:28:35 +00:00
// CSS extraction
// MiniCssExtractPlugin does not currently supports SSR
// https://github.com/webpack-contrib/mini-css-extract-plugin/issues/48
// So we use css-loader/locals as a fallback (utils/style-loader)
if (this.options.build.extractCSS && !this.isServer) {
2018-03-23 16:28:35 +00:00
plugins.push(new MiniCssExtractPlugin(Object.assign({
filename: this.getFileName('css'),
chunkFilename: this.getFileName('css')
2018-03-23 16:28:35 +00:00
}, this.options.build.extractCSS)))
}
2018-03-22 14:06:54 +00:00
return plugins
}
2018-03-22 14:06:54 +00:00
config() {
// Prioritize nested node_modules in webpack search path (#2558)
const webpackModulesDir = ['node_modules'].concat(this.options.modulesDir)
const config = {
name: this.name,
mode: this.options.dev ? 'development' : 'production',
optimization: {},
output: this.output(),
performance: {
maxEntrypointSize: 1000 * 1024,
hints: this.options.dev ? false : 'warning'
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.vue', '.jsx'],
2018-03-22 14:06:54 +00:00
alias: this.alias(),
modules: webpackModulesDir
},
resolveLoader: {
modules: webpackModulesDir
},
module: {
noParse: /es6-promise\.js$/, // Avoid webpack shimming process
rules: this.rules()
},
plugins: this.plugins()
}
// Clone deep avoid leaking config between Client and Server
return _.cloneDeep(config)
}
2016-11-07 01:34:58 +00:00
}