diff --git a/README.md b/README.md index f6d8a3b033..fd32ce1037 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,11 @@ const options = { routes: [], // see examples/custom-routes css: ['/dist/boostrap.css'] // see examples/global-css store: true // see examples/vuex-store - vendor: ['axios'], // see examples/plugins-vendor plugins: ['public/plugin.js'], // see examples/plugins-vendor loading: false or { color: 'blue', failedColor: 'red' } or 'components/my-loader' // see examples/custom-loading + build: { + vendor: ['axios'] // see examples/plugins-vendor + } } // Launch nuxt build with given options diff --git a/examples/async-data/nuxt.config.js b/examples/async-data/nuxt.config.js index 0eb31b286d..9aba646513 100644 --- a/examples/async-data/nuxt.config.js +++ b/examples/async-data/nuxt.config.js @@ -1,5 +1,7 @@ module.exports = { - vendor: ['axios'], // Add axios in the vendor.bundle.js + build: { + vendor: ['axios'] // Add axios in the vendor.bundle.js + }, loading: { color: '#4FC08D', failedColor: '#bf5050', diff --git a/examples/custom-build/assets/nuxt.png b/examples/custom-build/assets/nuxt.png new file mode 100644 index 0000000000..b9b484a432 Binary files /dev/null and b/examples/custom-build/assets/nuxt.png differ diff --git a/examples/custom-build/nuxt.config.js b/examples/custom-build/nuxt.config.js new file mode 100644 index 0000000000..9625400c40 --- /dev/null +++ b/examples/custom-build/nuxt.config.js @@ -0,0 +1,21 @@ +module.exports = { + build: { + filenames: { + css: 'app.css', // default: style.css + vendor: 'vendor.js', // default: vendor.bundle.js + app: 'app.js' // default: nuxt.bundle.js + }, + vendor: ['lodash'], + // Loaders config (Webpack 2) + loaders: [ + { + test: /\.(png|jpg|gif|svg)$/, + loader: 'url', + options: { + limit: 100000, // 100KO + name: 'img/[name].[ext]?[hash]' + } + } + ] + } +} diff --git a/examples/custom-build/package.json b/examples/custom-build/package.json new file mode 100644 index 0000000000..b9a104231d --- /dev/null +++ b/examples/custom-build/package.json @@ -0,0 +1,10 @@ +{ + "name": "custom-build", + "description": "", + "dependencies": { + "nuxt": "latest" + }, + "scripts": { + "start": "nuxt" + } +} diff --git a/examples/custom-build/pages/index.vue b/examples/custom-build/pages/index.vue new file mode 100644 index 0000000000..421cbb3a07 --- /dev/null +++ b/examples/custom-build/pages/index.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/head-elements/pages/index.vue b/examples/head-elements/pages/index.vue index 8896993d85..f61d0a18cb 100755 --- a/examples/head-elements/pages/index.vue +++ b/examples/head-elements/pages/index.vue @@ -1,4 +1,9 @@ diff --git a/examples/plugins-vendor/README.md b/examples/plugins-vendor/README.md index 7ae87dd476..567ed6516d 100644 --- a/examples/plugins-vendor/README.md +++ b/examples/plugins-vendor/README.md @@ -1,18 +1,20 @@ # Using external modules and plugings with Nuxt.js -## Configuration: `vendor` +## Configuration: `build.vendor` > Nuxt.js allows you to add modules inside the `vendor.bundle.js` file generated to reduce the size of the app bundle. It's really useful when using external modules (like `axios` for example) -To add a module/file inside the vendor bundle, add the `vendor` key inside `nuxt.config.js`: +To add a module/file inside the vendor bundle, add the `build.vendor` key inside `nuxt.config.js`: ```js const { join } = require('path') module.exports = { - vendor: [ - 'axios', // node module - join(__dirname, './js/my-library.js') // custom file - ] + build: { + vendor: [ + 'axios', // node module + join(__dirname, './js/my-library.js') // custom file + ] + } } ``` @@ -35,7 +37,9 @@ Then, I add my file inside the `plugins` key of `nuxt.config.js`: const { join } = require('path') module.exports = { - vendor: ['vue-notifications'], + build: { + vendor: ['vue-notifications'] + }, plugins: [ join(__dirname, './plugins/vue-notifications') ] } ``` diff --git a/examples/plugins-vendor/nuxt.config.js b/examples/plugins-vendor/nuxt.config.js index f7cbe9b2ad..fa08ade53c 100644 --- a/examples/plugins-vendor/nuxt.config.js +++ b/examples/plugins-vendor/nuxt.config.js @@ -1,6 +1,8 @@ const { join } = require('path') module.exports = { - vendor: ['axios', 'mini-toastr', 'vue-notifications'], + build: { + vendor: ['axios', 'mini-toastr', 'vue-notifications'] + }, plugins: [ join(__dirname, './plugins/vue-notifications.js') ] } diff --git a/lib/build/index.js b/lib/build/index.js index 8f5e0fb0fa..18f6e19f71 100644 --- a/lib/build/index.js +++ b/lib/build/index.js @@ -13,7 +13,44 @@ const { createBundleRenderer } = require('vue-server-renderer') const { join, resolve } = require('path') const r = resolve +const defaults = { + filenames: { + css: 'style.css', + vendor: 'vendor.bundle.js', + app: 'nuxt.bundle.js' + }, + vendor: [], + loaders: [] +} +const defaultsLoaders = [ + { + test: /\.(png|jpg|gif|svg)$/, + loader: 'url', + options: { + limit: 1000, // 1KO + name: 'img/[name].[ext]?[hash]' + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url', + query: { + limit: 1000, // 1 KO + name: 'fonts/[name].[hash:7].[ext]' + } + } +] + module.exports = function * () { + if (this.options.build === false) { + return Promise.resolve() + } + // Defaults build options + if (this.options.build && Array.isArray(this.options.build.loaders)) { + this.options.build = _.defaultsDeep(this.options.build, defaults) + } else { + this.options.build = _.defaultsDeep(this.options.build, defaults, { loaders: defaultsLoaders }) + } /* ** Check if pages dir exists and warn if not */ @@ -125,7 +162,6 @@ module.exports = function * () { webpackRunServer.call(this) ] } - return this } function addGlobalWebpackConfig (config) { @@ -142,37 +178,40 @@ function addGlobalWebpackConfig (config) { join(this.dir, 'node_modules') ] } + config.module.rules = config.module.rules.concat(this.options.build.loaders) return config } function getWebpackClientConfig () { var config = require(r(__dirname, 'webpack', 'client.config.js')) + config = _.cloneDeep(config) // Entry config.entry.app = r(this.dir, '.nuxt', 'client.js') // Add vendors if (this.options.store) config.entry.vendor.push('vuex') - config.entry.vendor = config.entry.vendor.concat(this.options.vendor) + 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.filenames.vendor + filename: this.options.build.filenames.vendor }) ) // Output config.output.path = r(this.dir, '.nuxt', 'dist') - config.output.filename = this.options.filenames.app + config.output.filename = this.options.build.filenames.app // Extract text plugin if (this.isProd) { const ExtractTextPlugin = require('extract-text-webpack-plugin') let plugin = config.plugins.find((plugin) => plugin instanceof ExtractTextPlugin) - if (plugin) plugin.filename = this.options.filenames.css + if (plugin) plugin.filename = this.options.build.filenames.css } return addGlobalWebpackConfig.call(this, config) } function getWebpackServerConfig () { var config = require(r(__dirname, 'webpack', 'server.config.js')) + config = _.cloneDeep(config) // Entry config.entry = r(this.dir, '.nuxt', 'server.js') // Output diff --git a/lib/build/webpack/base.config.js b/lib/build/webpack/base.config.js index 2b325ef200..7c2c3a8c25 100644 --- a/lib/build/webpack/base.config.js +++ b/lib/build/webpack/base.config.js @@ -30,22 +30,6 @@ module.exports = { options: { presets: ['es2015', 'stage-2'] } - }, - { - test: /\.(png|jpg|gif|svg)$/, - loader: 'url', - options: { - limit: 1000, // 1KO - name: 'img/[name].[ext]?[hash]' - } - }, - { - test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - loader: 'url', - query: { - limit: 1000, // 1 KO - name: 'fonts/[name].[hash:7].[ext]' - } } ] } diff --git a/lib/nuxt.js b/lib/nuxt.js index 7c62108223..6918ba9d6d 100644 --- a/lib/nuxt.js +++ b/lib/nuxt.js @@ -17,13 +17,7 @@ class Nuxt { constructor (options = {}, cb) { var defaults = { - filenames: { - css: 'style.css', - vendor: 'vendor.bundle.js', - app: 'nuxt.bundle.js' - }, routes: [], - vendor: [], plugins: [], css: [], store: false, @@ -56,9 +50,9 @@ class Nuxt { this.build = build.bind(this) // Launch build and set this.renderer return co(this.build) - .then((nuxt) => { - if (typeof cb === 'function') cb(null, nuxt) - return nuxt + .then(() => { + if (typeof cb === 'function') cb(null, this) + return this }) .catch((err) => { if (typeof cb === 'function') cb(err) @@ -125,9 +119,9 @@ class Nuxt { APP: html, context: context, files: { - css: join('/_nuxt/', self.options.filenames.css), - vendor: join('/_nuxt/', self.options.filenames.vendor), - app: join('/_nuxt/', self.options.filenames.app) + css: join('/_nuxt/', self.options.build.filenames.css), + vendor: join('/_nuxt/', self.options.build.filenames.vendor), + app: join('/_nuxt/', self.options.build.filenames.app) } }) return app diff --git a/package.json b/package.json index 41680b1112..a3443dc6a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt", - "version": "0.2.3", + "version": "0.2.4", "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)", "main": "index.js", "license": "MIT",