Vue-CLI 学习

Vue CLI 脚手架官网，注意下载的是webpack的cil，现在已经可以使用vite了

Vue-CLI将webpack的配置已经完全的封藏起来了，如果你新创建一个项目，发现 package.json 的 build 为：'vue-cli-service build'。

那我们该如何查看webpack配置，并添加自定义的配置呢？

Vue CLI配置webpack4

Working with Webpack

上面有介绍到，我们只需要在 vue.config.js 下面配置 webpacK 内容就好，但是需要注意的是， vue.config.js 又不完全和 webpackConfig一致，是对它的扩展：

• configureWebpack：经典配置

  module.exports = {
    configureWebpack: { // webpack 配置
      plugins: [
        new MyAwesomeWebpackPlugin()
      ]
    }
  }
  

• chainWebpack：兴起的链式调用的webpack配置 webpack-chain

  module.exports = {
    chainWebpack: config => {
      config.module
        .rule('vue')
        .use('vue-loader')
          .tap(options => {
            // modify the options...
            return options
          })
    }
  }
  

vue-loader

vue-loader

vue-loader是主要的处理 .vue结尾的模板文件，如果不理解它做了什么事情的话，不能很好的理解webpack的配置。

npm install -D vue-loader vue-template-compiler

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

但是需要注意的是，vue-loader 把 .vue的模板文件分成多个块，每个块相当于新的模块，比如style标签下，生成对应的css模块，这些模块能够被 webpack的 loader 处理：

let loaders= [
  ...loaders,
  {
    test: /\.css$/,
    use: [
      'vue-style-loader', // style-loader的vue加强版
      'css-loader'
    ]
  }
]

但是还有个问题，vue的模板中，可以配置很多属性比如局部作用域scoped，css解析器less/sass，那如果根据不同的规则配置不同的loader呢？

Scoped CSS

Scoped CSS 使用手册

vue-loader在识别.vue模块的时候就进行了自动的转换吗，因此如果是自己写webpack配置无需处理

CSS解析器

如果.vue模板的style的lang是less或者sass，那么和css一样，向外暴露出这个less/css模块，同样的可以通过 配置 webpack 的 loader 处理。

{
  test: /\.less$/,
  use: [
    'vue-style-loader', // style-loader的vue加强版
    'css-loader',
    'less-loader'
  ]
}

inspect 查看webpack的配置

Inspecting the Project's Webpack Config

vue inspect

需要说明的是，vue 指令，需要安装 @vue/cli，如果你不选择全局安装，那么需要在本地安装，但是这有点不合适，因为 vue create 可以创建项目，它需要你先有 vue，再创建项目。

npm i @vue/cli -g