vue-cli中配置webpack系列文章三 ------ utils.js

utils.js

  var path = require('path')
  var config = require('../config')
  var ExtractTextPlugin = require('extract-text-webpack-plugin')
  // 设置静态文件的公共路径,用于修改src属性的值(通常用于某个loader的options)
  exports.assetsPath = function (_path) {
    // 根据不同的环境到对公共路径进行配置并与传入的文件名称进行合并
    var assetsSubDirectory = process.env.NODE_ENV === 'production'
      ? config.build.assetsSubDirectory
      : config.dev.assetsSubDirectory
    return path.posix.join(assetsSubDirectory, _path)
  }
  // css加载器的相关配置
  exports.cssLoaders = function (options) {
    options = options || {}
    var cssLoader = {
      loader: 'css-loader',
      options: {
        // 根据不同的环境配置是否要对css文件进行压缩
        minimize: process.env.NODE_ENV === 'production',
        // 根据传入的配置决定是否生成sourceMap用于调试bug
        sourceMap: options.sourceMap
      }
    }
    // 定义名为"generateLoaders"的函数用于配置css或css预处理器文件
    function generateLoaders (loader, loaderOptions) {
      var loaders = [cssLoader]
      // 如果有css预处理器文件(如less、sass、stylus等)
      if (loader) {
        loaders.push({
          // 使用该预处理器对应的加载器
          loader: loader + '-loader',
          // 创建一个空对象,将css加载器初始配置与该预处理器的特殊配置进行合并
          options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
          })
        })
      }
      // 是否将入口文件(main.js)中引入的css文件一起打包进该文件的css中
      // 根据传入的options.extract的值进行判断(一般在生产环境中会去单独打包)
      if (options.extract) {
        return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
        })
      } else {
        return ['vue-style-loader'].concat(loaders)
      }
    }
    return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders('less'),
      sass: generateLoaders('sass', { indentedSyntax: true }),
      scss: generateLoaders('sass'),
      stylus: generateLoaders('stylus'),
      styl: generateLoaders('stylus')
    }
  }
  // 对.vue文件之外的css文件或css预处理器文件进行处理
  exports.styleLoaders = function (options) {
    var output = []
    var loaders = exports.cssLoaders(options)
    // 循环cssLoaders返回出来的所有文件类型
    for (var extension in loaders) {
      var loader = loaders[extension]
      // 对每一个文件类型用其相对应的加载器进行处理
      output.push({
        test: new RegExp('\\.' + extension + '$'),
        use: loader
      })
    }
    return output
  }

此时无能为力,此心随波逐流

885 声望
22 粉丝
0 条评论
推荐阅读
markdown编写API文档
很多组件库都参照的element的这种文档处理方式,就是markdown生成文档架子搭建可能还好,需要根据咱们自己的需求需要定制处理剩下的就是文档格式和文档编写了[链接]

亲爱的阿乾阅读 21

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.8k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

此时无能为力,此心随波逐流

885 声望
22 粉丝
宣传栏