vue-cli与webpack处理静态资源的方法及webpack打包的坑

下面我将详细介绍vue-cli与webpack处理静态资源的方法及webpack打包的坑。

1. vue-cli与webpack处理静态资源的方法

1.1 图片资源处理

在vue-cli项目中，图片资源可以使用require()直接导入，在vue文件中使用即可，例如：

<template>
  <div>
    <img :src="imgUrl" alt="">
  </div>
</template>

<script>
export default {
  name: 'Example',
  data() {
    return {
      imgUrl: require('@/assets/images/example.png')
    }
  }
}
</script>

1.2 CSS资源处理

可以在vue文件中使用import导入css文件，在style标签中使用即可，例如：

<template>
  <div class="example">
    Example
  </div>
</template>

<script>
export default {
  name: 'Example'
}
</script>

<style lang="scss">
@import '@/assets/styles/example.scss';

.example {
  // example.scss中定义的样式
  @include exampleMixin();
}
</style>

2. webpack打包的坑

2.1 文件名hash

使用vue-cli脚手架以及webpack构建项目时，打包时需要对文件名进行hash处理，防止浏览器缓存，具体设置如下：

// vue.config.js
module.exports = {
  filenameHashing: true,
  // ...其他配置
}

2.2 静态资源路径

在vue-cli项目中使用vue-router时，打包后的index.html引用静态资源的路径不对，需要手动设置publicPath，具体设置如下：

// vue.config.js
module.exports = {
  publicPath: './',
  // ...其他配置
}

2.3 打包后文件名不一致

在使用vue-cli构建项目并打包时，很可能会遇到一个问题，即打包后文件名经常不是你期望的名字。这是因为vue-cli在打包时会根据入口文件的名称生成output内的filename标识符。但是当webpack遇到第三方包时，它不会根据包名打包生成对应的文件名，而是根据module.exports，相关处理如下：

// vue.config.js
module.exports = {
  // 修改 webpack 的配置
  configureWebpack: {
    entry: {
      app: './src/main.js'
    },
    output: {
      filename: 'js/[name].[hash].js',
      chunkFilename: 'js/[name].[hash].js'
    },
    optimization: {
      runtimeChunk: 'single', // 将 webpack 的 runtime 和模板文件合并
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] // 由于名称不统一，这里的处理方式是取包名作为最终生成的文件名
              return `vendor.${packageName.replace('@', '')}`
            },
            chunks: 'all'
          }
        }
      }
    }
  },
  // ...其他配置
}

以上就是关于vue-cli与webpack处理静态资源的方法及webpack打包的坑的详细攻略，希望对你有所帮助。