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)

    }

巴特西

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

最新文章

热门文章