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

马龙驹发布于2019-08-26 13:50 / 2929人阅读

摘要：设置静态文件的公共路径，用于修改属性的值通常用于某个的根据不同的环境到对公共路径进行配置并与传入的文件名称进行合并加载器的相关配置根据不同的环境配置是否要对文件进行压缩根据传入的配置决定是否生成用于调试定义名为的函数用于配置或预处理

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
  }

GPU云服务器云服务器系列三 webpack cdn配置 webpack配置cdn webpack常用配置项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109652.html

vue-cli解析

摘要：在中，设置了一些配置，代码如下通过它的注释，我们可以理解它在中配置了静态路径本地服务器配置项等参数。下面还有一个的对象，它是在本地服务器启动时，打包的一些配置，代码如下其中包括模版文件的修改，打包完目录之后的一些路径设置，压缩等。前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。这篇文章的主...

KunMinX 2019-08-21 18:24 评论0 收藏0
vue学习系列（二）vue-cli

摘要：一介绍是官方提供的脚手架，用来快速建立项目。标识项目名称，这个你可以根据自己的项目来起名字。初始化完成之后，进入安装目录，必须先安装项目依赖，否则无法运行。源文件需要注意的是是入口文件，下的是路由文件，文件是组件文件。一.介绍 vue-cli是官方提供的脚手架，用来快速建立项目。二.安装 npm install vue-cli -g//全局安装三.初始化项目 vue init ...

baishancloud 2019-08-26 11:50 评论0 收藏0
webpack开发与生产环境配置

摘要：豹哥对于刚开始小白的自己虽然现在也白知无不谈，而且回复超快超认真。这里真的很感谢豹哥。是项目启动时的一些文件，如的配置文件开发环境服务配置文件一些简单工具函数等等。是关于整个项目的环境配置包括开发与生产。前言作者去年就开始使用webpack, 最早的接触就来自于vue-cli。那个时候工作重点主要也是 vue 的使用，对webpack的配置是知之甚少，期间有问题也是询问大牛 @吕大...

afishhhhh 2019-08-20 18:32 评论0 收藏0
Vue-cli 命令行工具分析

摘要：文章来源命令行工具分析命令行工具分析提供一个官方命令行工具，可用于快速搭建大型单页应用。其他模式的配置文件以此为基础通过合并。文章来源：Vue-cli 命令行工具分析 Vue-cli 命令行工具分析 Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。vue-webpack-boilerplate，官方定义为： full-featured Webpack setup ...

LoftySoul 2019-08-21 17:44 评论0 收藏0
vue-cli webpack配置分析

相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。于是，就有了其他的内容。今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。说明此仓库为vue-cli webpack的配置分析...

suemi 2019-08-21 11:35 评论0 收藏0