vue-cli2 npm run dev 究竟做了一些什么（二）

module

moudle对应loader（加载器 ）的配置，主要对指定类型的文件进行操作，举个例子：js类型的文件和css文件需要不同的loader来处理。线看一下脚手架的配置

其module下主要是一个rules数组，其主要的功能就是配置模块的读取和解析规则，数组里面的每一项都描述了如何去处理部分文件

数组的每一项的参数大概功能就是

• 条件匹配：通过 test 、 include 、 exclude 三个配置项来命中 Loader 要应用规则的文件
• 应用规则：对选中后的文件通过 use 配置项来应用 Loader，可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader，同时还可以分别给 Loader 传入参数
• 重置顺序：一组 Loader 的执行顺序默认是从右到左执行，通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后（基本上使用很少）

module: {
  rules: [
    {
      // 命中 JavaScript 文件
      test: /\.js$/,
      // 用 babel-loader 转换 JavaScript 文件
      // ?cacheDirectory 表示传给 babel-loader 的参数，用于缓存 babel 编译结果加快重新编译速度
      use: ['babel-loader?cacheDirectory'],
      // 只命中src目录里的js文件，加快 Webpack 搜索速度
      include: path.resolve(__dirname, 'src')
    },
    {
      // 命中 SCSS 文件
      test: /\.scss$/,
      // 使用一组 Loader 去处理 SCSS 文件。
      // 处理顺序为从后到前，即先交给 sass-loader 处理，再把结果交给 css-loader 最后再给 style-loader。
      use: ['style-loader', 'css-loader', 'sass-loader'],
      // 脚手架没有用use 这个参数 而是直接使用的loader + options 来配置的 其实也可以
      // loader: 'style-loader!css-loader!sass-loader'
      // options: {}
      // 用use的话若需要额外的配置的写法如下
      use: [
          {
              loader: 'style-loader',
              options: {}
          },
          {
              loader: 'css-loader',
              options: {}
          },
            {
              loader: 'sass-loader',
              options: {}
          }

       ]
      // 排除 node_modules 目录下的文件
      exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
      // 对非文本文件采用 file-loader 加载
      test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
      use: ['file-loader'],
    },
  ]
}

可以看出配置是灵活多变的，可以根据项目中的实际情况而定。至于options的配置根据不同的loader而配置的，具体的配置参数可以参考官网的详解。这里我们项目中的.vue 为什么会被转化为js 文件就是因为使用使用了vue-loader,将这些文件转成了js的模块，这里的tempalte模块是通过vue-loader的依赖vue-template-compiler来解析的，转成对应的render函数，css 则会通过对应的loader 去处理。另外通常babel-loader的配置项可以写在根目录下的.babelrc文件中

{
  "presets": ["stage-2"],
  "plugins": ["transform-runtime"]
}

未完待续