Support custom filenames (vuejs#326)

* support custom filenames * update docs
taosin · Feb 2, 2017 · 8b1b918 · 8b1b918
1 parent 8e19c5a
commit 8b1b918
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -38,7 +38,7 @@ If you want to directly test a component without manually create a Vue instance
 $ vue build Component.vue
 ```
 
-<details><summary>How does this work?</summary>
+<details><summary>How does this work?</summary><br>
 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`.
 </details>
 
@@ -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`