diff --git a/bin/vue-build b/bin/vue-build index c89132b356..16f0e9b4b1 100755 --- a/bin/vue-build +++ b/bin/vue-build @@ -125,13 +125,15 @@ if (hasBabelRc) { babelOptions.presets.push(require.resolve('babel-preset-vue-app')) } +var filenames = getFilenames(options) + var webpackConfig = { entry: { client: [] }, output: { path: path.join(process.cwd(), options.dist), - filename: production ? '[name].[chunkhash:8].js' : '[name].js', + filename: filenames.js, publicPath: '/' }, performance: { @@ -175,7 +177,7 @@ var webpackConfig = { test: /\.(ico|jpg|png|gif|svg|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/, loader: 'file-loader', query: { - name: options.lib ? 'static/[name].[ext]' : 'static/[name].[hash:8].[ext]' + name: filenames.static } } ].concat(loaders.styleLoaders(cssOptions)) @@ -253,7 +255,7 @@ if (production) { new webpack.LoaderOptionsPlugin({ minimize: true }), - new ExtractTextPlugin(options.lib ? `${replaceExtension(options.entry, '.css')}` : '[name].[contenthash:8].css') + new ExtractTextPlugin(filenames.css) ) } else { if (!options.watch) { @@ -377,3 +379,11 @@ function handleBuild (err, stats, watch) { console.log(` ${chalk.yellow('serve')} ${options.dist} --single\n`) } } + +function getFilenames (options) { + return Object.assign({ + js: options.production ? '[name].[chunkhash:8].js' : '[name].js', + css: options.lib ? `${replaceExtension(options.entry, '.css')}` : '[name].[contenthash:8].css', + static: options.lib ? 'static/[name].[ext]' : 'static/[name].[hash:8].[ext]' + }, options.filename) +} diff --git a/docs/build.md b/docs/build.md index 65d757976c..685444f95f 100644 --- a/docs/build.md +++ b/docs/build.md @@ -38,7 +38,7 @@ If you want to directly test a component without manually create a Vue instance $ vue build Component.vue ``` -
How does this work? +
How does this work?
When the input file ends with `.vue` extension, we use a [default app entry](/lib/default-entry.es6) to load the given component, otherwise we treat it as a normal webpack entry. For jsx component which ends with `.js` extension, you can enable this behavior manually by adding `--mount`.
@@ -150,6 +150,20 @@ Type: `Object` Check out the [default template](/lib/template.html) file we use. +#### filename + +Set custom filename for `js` `css` `static` files: + +```js +{ + filename: { + js: 'index.js', + css: 'style.css', + static: 'static/[name].[ext]' + } +} +``` + #### proxy Type: `string`, `Object`