webpack打包如何统一js和css中图片资源路径

目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深。

先说下修改了哪些配置

1-build/utils.js下的cssLoaders内的generateLoaders方法内部的

    // Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath: '../../'//此处修改是矫正iview的font等文件夹打包路径错误
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }

2-webpack.base.conf.js下的module对象内的rules针对图片类型的配置

          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: utils.assetsPath('img/[folder]/[name].[ext]')
              // [folder]/ 是为了保留项目组件文件夹内部资源文件夹
              // 在打包后在img文件夹里面对应生成相同的文件夹,方便维护
              // 另外取消了图片的hash
            }
          },

3-config/index.js

dev的配置就不说了,改了端口,偶尔会修改下默认启动的lolocalhost用于移动调试

主要是build下的

    assetsPublicPath:'./',//改为./

目前这套配置运行良好.图片那里的修改你可以照样引用原本的cli配置.我这是根据项目需求变动的.

assetsPath如下

    exports.assetsPath = function(_path) {
      const assetsSubDirectory = process.env.NODE_ENV === 'production'
        ? config.build.assetsSubDirectory
        : config.dev.assetsSubDirectory

      returnpath.posix.join(assetsSubDirectory, _path)
    }