feat(cli-service): use "filenameHashing" option when building wc and wc-async

packages/@vue/cli-service/__tests__/buildWc.spec.js

@@ -1,5 +1,6 @@
 jest.setTimeout(30000)
 
+const fs = require('fs-extra')
 const path = require('path')
 const portfinder = require('portfinder')
 const createServer = require('@vue/cli-test-utils/createServer')
@@ -16,8 +17,9 @@ test('build as wc', async () => {
  expect(stdout).toMatch('Build complete.')
 
  expect(project.has('dist/demo.html')).toBe(true)
- expect(project.has('dist/build-wc.js')).toBe(true)
- expect(project.has('dist/build-wc.min.js')).toBe(true)
+ const files = await fs.readdir(path.resolve(project.dir, 'dist'))
+ expect(files.filter(f => f.match(/build-wc\.\w{8}\.js$/)).length).toBe(1)
+ expect(files.filter(f => f.match(/build-wc\.\w{8}\.min\.js$/)).length).toBe(1)
 
  const port = await portfinder.getPortPromise()
  server = createServer({ root: path.join(project.dir, 'dist') })
@@ -61,8 +63,9 @@ test('build as single wc', async () => {
  expect(stdout).toMatch('Build complete.')
 
  expect(project.has('dist/demo.html')).toBe(true)
- expect(project.has('dist/single-wc.js')).toBe(true)
- expect(project.has('dist/single-wc.min.js')).toBe(true)
+ const files = await fs.readdir(path.resolve(project.dir, 'dist'))
+ expect(files.filter(f => f.match(/single-wc\.\w{8}\.js$/)).length).toBe(1)
+ expect(files.filter(f => f.match(/single-wc\.\w{8}\.min\.js$/)).length).toBe(1)
 
  const port = await portfinder.getPortPromise()
  server = createServer({ root: path.join(project.dir, 'dist') })
@@ -122,8 +125,9 @@ test('build as wc with --inline-vue', async () => {
  expect(stdout).toMatch('Build complete.')
 
  expect(project.has('dist/demo.html')).toBe(true)
- expect(project.has('dist/single-wc.js')).toBe(true)
- expect(project.has('dist/single-wc.min.js')).toBe(true)
+ const files = await fs.readdir(path.resolve(project.dir, 'dist'))
+ expect(files.filter(f => f.match(/single-wc\.\w{8}\.js$/)).length).toBe(1)
+ expect(files.filter(f => f.match(/single-wc\.\w{8}\.min\.js$/)).length).toBe(1)
 
  const port = await portfinder.getPortPromise()
  server = createServer({ root: path.join(project.dir, 'dist') })

packages/@vue/cli-service/__tests__/buildWcAsync.spec.js

@@ -16,13 +16,13 @@ test('build as wc in async mode', async () => {
  expect(stdout).toMatch('Build complete.')
 
  expect(project.has('dist/demo.html')).toBe(true)
- expect(project.has('dist/build-wc-async.js')).toBe(true)
- expect(project.has('dist/build-wc-async.min.js')).toBe(true)
+ const files = await fs.readdir(path.resolve(project.dir, 'dist'))
+ expect(files.filter(f => f.match(/build-wc-async\.\w{8}\.js$/)).length).toBe(1)
+ expect(files.filter(f => f.match(/build-wc-async\.\w{8}\.min\.js$/)).length).toBe(1)
 
  // code-split chunks
- const files = await fs.readdir(path.resolve(project.dir, 'dist'))
- const asyncOutputs = files.filter(f => f.match(/build-wc-async\.\d+\.js/))
- const minifiedAsycnOutputs = files.filter(f => f.match(/build-wc-async\.\d+\.min\.js/))
+ const asyncOutputs = files.filter(f => f.match(/build-wc-async\.\d+\.\w{8}\.js/))
+ const minifiedAsycnOutputs = files.filter(f => f.match(/build-wc-async\.\d+\.\w{8}\.min\.js/))
  expect(asyncOutputs.length).toBe(2)
  expect(minifiedAsycnOutputs.length).toBe(2)
 

packages/@vue/cli-service/lib/commands/build/demo-wc.html

@@ -2,8 +2,9 @@
 <meta charset="utf-8">
 <title><%- htmlWebpackPlugin.options.libName %> demo</title>
 <script src="https://unpkg.com/vue"></script>
-<script src="./<%- htmlWebpackPlugin.options.libName %>.js"></script>
-
+<% for (var chunk in htmlWebpackPlugin.files.js) { %>
+ <script src="<%= htmlWebpackPlugin.files.js[chunk]%>"></script>
+<% } %>
 <% for (const comp of htmlWebpackPlugin.options.components) { %>
 <<%= comp %>></<%= comp %>>
 <% } %>

packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const { resolveEntry, fileToComponentName } = require('./resolveWcEntry')
 
-module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
+module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }, { filenameHashing }) => {
  // Disable CSS extraction and turn on CSS shadow mode for vue-style-loader
  process.env.VUE_CLI_CSS_SHADOW_MODE = true
 
@@ -115,14 +115,14 @@ module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
  { ...(inlineVue || { vue: 'Vue' }) }
  ].filter(Boolean)
 
- const entryName = `${libName}${minify ? `.min` : ``}`
+ const entryName = `${libName}${filenameHashing ? '.[chunkhash:8]' : ''}${minify ? `.min` : ``}`
  rawConfig.entry = {
  [entryName]: dynamicEntry.filePath
  }
 
  Object.assign(rawConfig.output, {
  filename: `${entryName}.js`,
- chunkFilename: `${libName}.[name]${minify ? `.min` : ``}.js`,
+ chunkFilename: `${libName}.[name]${filenameHashing ? '.[chunkhash:8]' : ''}${minify ? `.min` : ``}.js`,
  // use dynamic publicPath so this can be deployed anywhere
  // the actual path will be determined at runtime by checking
  // document.currentScript.src.