详解在vue-cli3.0中自定css、js和图片的打包路径

vue ui

output: {
  path: 'xxx',
  filename: 'js/[name].[contenthash:8].js',
  publicPath: '',
  chunkFilename: 'js/[name].[contenthash:8].js'
}

/* config.plugin('extract-css') */
new MiniCssExtractPlugin(
  {
  filename: 'css/[name].[contenthash:8].css',
  chunkFilename: 'css/[name].[contenthash:8].css'
  }
),

/* config.module.rule('images') */
{
  test: /\.(png|jpe"color: #ff0000">更改webpack配置


需要更改的webpack相关配置如下：
js路径配置更改


js路径更改output配置即可，output配置在configureWebpack配置项中进行更改，因为vue.config.js中对于configureWebpack选项的配置将会被merge到webpack配置中，所以更改该项配置即可，如下：


module.exports = {
  configureWebpack: config => {
    // js output config
    config.output.filename = '[name].[contenthash:8].js'
    config.output.chunkFilename = '[name].[contenthash:8].js'

  },
}




更改MiniCssExtractPlugin插件配置


更改该配置需要先安装MiniCssExtractPlugin插件到开发依赖中，如下：


npm install --save-dev mini-css-extract-plugin
# 或者
yarn add mini-css-extract-plugin --dev



然后在vue.config.js文件中添加相关配置到chainWebpack即可，如下所示：


module.exports = {
  chainWebpack: config => {
    // css output config
    let miniCssExtractPlugin = new MiniCssExtractPlugin(
      {
        filename: '[name].[contenthash:8].css',
        chunkFilename: '[name].[contenthash:8].css'
      }
    )
    config.plugin('extract-css').use(miniCssExtractPlugin)
  },
}



更改各种资源loader配置


更改该配置仍然需要将相关配置添加到chainWepack配置项中，如下：


module.exports = {
  chainWebpack: config => {
    // image output config
    config.module.rule('images')
      .test(/\.(png|jpe"color: #ff0000">结语


总的配置项如下所示：


module.exports = {
  configureWebpack: config => {
    // js output config
    config.output.filename = '[name].[contenthash:8].js'
    config.output.chunkFilename = '[name].[contenthash:8].js'

  },
  chainWebpack: config => {
    // css output config
    let miniCssExtractPlugin = new MiniCssExtractPlugin(
      {
        filename: '[name].[contenthash:8].css',
        chunkFilename: '[name].[contenthash:8].css'
      }
    )
    config.plugin('extract-css').use(miniCssExtractPlugin)

    // image output config
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
      .loader('file-loader')
      .options({
        name: '[name].[hash:8].[ext]'
      })
    config.module.rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: '[name].[hash:8].[ext]'
      })

  },
}




这时，在运行inspect检查webpack配置，即可看到相关路径前的css/，js/，img/等前缀已经消失，快快打包尝试吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。