Nuxt/lib/builder/webpack/base.config.mjs

167 lines
4.9 KiB
JavaScript
Raw Normal View History

2018-03-16 19:52:17 +00:00
import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
2018-03-16 16:12:06 +00:00
import TimeFixPlugin from 'time-fix-plugin'
import webpack from 'webpack'
2018-03-16 19:11:24 +00:00
import _ from 'lodash'
2018-02-28 07:28:17 +00:00
2018-03-16 16:12:06 +00:00
import { isUrl, urlJoin } from '../../common/utils'
2018-02-28 07:28:17 +00:00
2018-03-16 19:52:17 +00:00
import WarnFixPlugin from './plugins/warnfix'
import ProgressPlugin from './plugins/progress'
2018-03-16 16:12:06 +00:00
import vueLoader from './vue-loader'
import styleLoader from './style-loader'
2016-11-07 01:34:58 +00:00
/*
|--------------------------------------------------------------------------
| Webpack Shared Config
|
2016-11-18 03:02:43 +00:00
| This is the config which is extended by the server and client
2016-11-07 01:34:58 +00:00
| webpack config files
|--------------------------------------------------------------------------
*/
2018-03-16 16:12:06 +00:00
export default function webpackBaseConfig({ name, isServer }) {
// Prioritize nested node_modules in webpack search path (#2558)
const webpackModulesDir = ['node_modules'].concat(this.options.modulesDir)
2018-02-03 11:54:16 +00:00
const configAlias = {}
2018-02-03 11:10:06 +00:00
// Used by vue-loader so we can use in templates
// with <img src="~/assets/nuxt.png"/>
2018-03-16 19:11:24 +00:00
configAlias[this.options.dir.assets] = path.join(
2018-02-26 13:15:08 +00:00
this.options.srcDir,
this.options.dir.assets
)
2018-03-16 19:11:24 +00:00
configAlias[this.options.dir.static] = path.join(
2018-02-26 13:15:08 +00:00
this.options.srcDir,
this.options.dir.static
)
2018-02-03 11:10:06 +00:00
2017-06-15 22:19:53 +00:00
const config = {
name,
2018-02-26 13:15:08 +00:00
mode: this.options.dev ? 'development' : 'production',
2018-03-13 11:58:40 +00:00
optimization: {},
output: {
2018-03-16 19:11:24 +00:00
path: path.resolve(this.options.buildDir, 'dist'),
filename: this.getFileName('app'),
chunkFilename: this.getFileName('chunk'),
2018-03-17 09:34:33 +00:00
jsonpFunction: '_NXT_',
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)
},
2016-12-15 17:53:00 +00:00
performance: {
2018-03-17 09:34:33 +00:00
maxEntrypointSize: 1000 * 1024,
2017-06-15 22:19:53 +00:00
hints: this.options.dev ? false : 'warning'
2016-12-15 17:53:00 +00:00
},
resolve: {
2018-01-26 13:37:00 +00:00
extensions: ['.js', '.json', '.vue', '.jsx'],
2018-02-26 13:15:08 +00:00
alias: Object.assign(
{
2018-03-16 19:11:24 +00:00
'~': path.join(this.options.srcDir),
'~~': path.join(this.options.rootDir),
'@': path.join(this.options.srcDir),
'@@': path.join(this.options.rootDir)
2018-02-26 13:15:08 +00:00
},
configAlias
),
modules: webpackModulesDir
},
resolveLoader: {
modules: webpackModulesDir
},
module: {
2017-08-14 14:03:07 +00:00
noParse: /es6-promise\.js$/, // Avoid webpack shimming process
rules: [
{
test: /\.vue$/,
2016-11-14 22:59:54 +00:00
loader: 'vue-loader',
2017-12-29 08:56:32 +00:00
options: vueLoader.call(this, { isServer })
},
{
2018-01-18 12:10:23 +00:00
test: /\.jsx?$/,
2016-11-14 22:59:54 +00:00
loader: 'babel-loader',
exclude: /node_modules/,
options: this.getBabelOptions({ isServer })
},
2017-12-29 08:56:32 +00:00
{ test: /\.css$/, use: styleLoader.call(this, 'css') },
{ test: /\.less$/, use: styleLoader.call(this, 'less', 'less-loader') },
{
test: /\.sass$/,
use: styleLoader.call(this, 'sass', {
loader: 'sass-loader',
options: { indentedSyntax: true }
})
},
2017-12-29 08:56:32 +00:00
{ test: /\.scss$/, use: styleLoader.call(this, 'scss', 'sass-loader') },
{
test: /\.styl(us)?$/,
use: styleLoader.call(this, 'stylus', 'stylus-loader')
},
2017-06-11 19:04:59 +00:00
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
2017-08-14 14:03:07 +00:00
options: {
2017-06-11 19:04:59 +00:00
limit: 1000, // 1KO
name: 'img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
2017-08-14 14:03:07 +00:00
options: {
2017-06-11 19:04:59 +00:00
limit: 1000, // 1 KO
name: 'fonts/[name].[hash:7].[ext]'
}
2017-07-31 08:41:40 +00:00
},
{
test: /\.(webm|mp4)$/,
2017-08-14 14:03:07 +00:00
loader: 'file-loader',
options: {
2017-08-01 15:40:31 +00:00
name: 'videos/[name].[hash:7].[ext]'
}
2017-06-11 19:04:59 +00:00
}
]
},
plugins: this.options.build.plugins
2016-11-07 01:34:58 +00:00
}
2017-06-15 22:19:53 +00:00
2018-03-11 23:15:14 +00:00
// Build progress indicator
2018-03-18 08:51:56 +00:00
if (!this.options.test) {
if (this.options.build.profile) {
config.plugins.push(new webpack.ProgressPlugin({ profile: true }))
} else {
config.plugins.push(new ProgressPlugin({
spinner: this.spinner,
name: isServer ? 'server' : 'client',
color: isServer ? 'green' : 'darkgreen'
}))
}
2018-03-11 21:28:56 +00:00
}
// Add timefix-plugin before others plugins
2017-06-15 22:19:53 +00:00
if (this.options.dev) {
config.plugins.unshift(new TimeFixPlugin())
2017-06-15 22:19:53 +00:00
}
2017-12-08 08:42:18 +00:00
// Hide warnings about plugins without a default export (#1179)
config.plugins.push(new WarnFixPlugin())
// CSS extraction
const extractCSS = this.options.build.extractCSS
if (extractCSS) {
config.plugins.push(new ExtractTextPlugin(Object.assign({
filename: this.getFileName('css')
// When using optimization.splitChunks and there are
// extracted chunks in the commons chunk,
// allChunks *must* be set to true
// TODO: For nuxt this makes duplicate css assets!
// allChunks: true
}, typeof extractCSS === 'object' ? extractCSS : {})))
}
2017-06-15 22:19:53 +00:00
// Clone deep avoid leaking config between Client and Server
2018-03-16 19:11:24 +00:00
return _.cloneDeep(config)
2016-11-07 01:34:58 +00:00
}