vue-cli 3

[uniquejava]

update cli

npm update @vue/cli -g
vue create xxx
vue add @vue/e2e-cypress

Using the New vue-cli 3 to Scaffold Vue.js Apps

notes

What's the difference between filename and chunkFilename options: 见: https://webpack.js.org/guides/code-splitting/

Static / Fixed filenames for generated vue-cli builds

chainWebpack的使用示例 https://github.com/vuejs/vue-cli/issues/1019

➜  client git:(master) ✗ vue inspect --rule images
/* config.module.rule('images') */
{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [
    /* config.module.rule('images').use('url-loader') */
    {
      loader: 'url-loader',
      options: {
        limit: 4096,
        name: 'static/img/[name].[hash:8].[ext]'
      }
    }
  ]
}
➜  client git:(master) ✗

Disable Hashed Filenames

无意间看到了官方的去掉hash的例子, 贴过来压压惊.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign({}, options, { name: 'img/[name].[ext]' }));
  },
  css: {
    extract: {
      filename: '/css/[name].css',
      chunkFilename: '/css/[name].css'
    }
  },
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
      chunkFilename: 'js/[name].js'
    }
  }
};

来自: Disable Hashed Filenames