四. Vue CLI详解

四. Vue CLI详解

1. webpack

1> 什么是webpack

模块 和 打包

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。

并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。

而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在后续我们会看到）。
这就是webpack中模块化的概念。

打包：
理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。

就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。

并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

2> webpack和gulp对比

但是打包的操作似乎grunt/gulp也可以帮助我们完成，它们有什么不同呢？

grunt/gulp的核心是Task
我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css）
之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。
所以grunt/gulp也被称为前端自动化任务管理工具。

只需要进行简单的合并、压缩，就使用grunt/gulp即可。
但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。
所以，grunt/gulp和webpack有什么不同呢？
grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

3> 手动webpack的配置

webpack安装

webpack模块化打包，webpack为了能够正常的运行，必须依赖node环境

node环境为了可以正常的执行很多代码 ，必须其中包含各种依赖的包

如果我们手动去管理这些依赖的包会非常的复杂，所以node这个工具给我们提供了npm（node package manager） 工具

查看自己的node版本：

node - v

全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)

npm install webpack@3.6.0 -g

安装完之后可以查看webpack的版本

webpack -version

dict --> distribution （发布）

我们在mathUtils.js中编写两个方法，并且用commonjs的方法，将其导出

function add(num1,num2){
    return num1 + num2;
}

function mul(num1,num2) {
    return num1*num2;
}

module.exports  = {
    add,mul
}

在main.js中引用

// 1.使用commonjs的模块化规范
const {add, mul} = require('./mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

我们要想看效果需要在index.html中查看，但是这里的并不能直接引用

<script src = "./src/main.js"></script>

因为我们的浏览器不知道main.js引用了mathUtils.js中的内容 ，这样就可以用我们刚才安装的webpack对这个main.js进行打包，打包出来一个浏览器能够认识的文件，让index.html去引用浏览器能够认识的文件

webpack就能够处理模块之间相互的依赖，处理完之后

在终端中输入：

webpack ./src/main.js ./dist/bundle.js

导入还可以这样导入：

//2.使用ES6的模块化规范
import {name,age,height} from "./info";

console.log(name)
console.log(age)
console.log(height)

配置webpack.config.js的时候这里需要是绝对路径，但是我们不能直接粘贴一个固定的绝对路径，需要动态的去获取，这里我们需要使用node

const path = require('path');

这里我们并没有path这个包，我们需要初始化一下

npm  init

这里之后除了随便名一个名之外，直接全部回车就可以了

之后如果输入npm install，这里会按照package.json里面的依赖的内容来给我们安装依赖。

__dirname代表当前的路径，是自带的，然后拼接上dist文件即可，这样就可以拿到绝对路径了

webpack.config.js：

const path = require('path');

module.exports = {
    entry:'./src/main.js',
    output: {
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

可以用npm run build，这里可以比webpack更加好用，但是我们需要将webpack和 build进行映射，

npm run build与webpack直接放入命令行差不多，但是有一点区别：

但是如果写入package.json的时候会优先到本地来找这个命令，找本地安装的webpack，但是在下面的命令行里面输入的话就是全局的webpack，因为他们的版本不同所以可能产生一些问题。

webpack在运行的时候并没有什么用处，只是在刚开始的时候进行打包。（开发时依赖）

在本地安装

 npm install webpack@3.6.0 --save-dev

打包完之后会出现，这叫做开发时依赖

 "devDependencies": {
    "webpack": "^3.6.0"
  }

运行时依赖

dependencies": {
}

这个与上面是对立的关系

通过node_modules/.bin/webpack启动webpack打包

node_modules/.bin/webpack

loader

什么是loader？

在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

对于webpack本身的能力来说，对于这些转化是不支持的。

那怎么办呢？给webpack扩展对应的loader就可以啦。

css-loader

如果想使用的话首先需要引用

require('./css/normal.css')

步骤一：通过npm安装需要使用的loader

npm install css-loader@2.0.2 --save-dev --legacy-peer-deps

步骤二：在webpack.config.js中的modules关键字下进行配置

module: {
    rules: [
        {test: /\.css$/,
         use: ['css-loader']},
    ],
},

css-loader只负责导入，真正的将样式添加到我们dom中还是需要安装style-loader

style-loader

同时安装:

npm install style-loader@0.23.1 --save-dev --legacy-peer-deps

然后把style-loader也配置进去

use: ['style-loader','css-loader']

less-loader

//4.依赖less文件
require('./css/special.less')

安装loader：

npm install --save-dev less-loader@4.1.0  less@3.9.0  --legacy-peer-deps

{
    test: /\.less$/,
        use: [{
            loader: "style-loader", // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader", // compiles Less to CSS
        }]
},

可以向这里面添加

//向界面上写东西
document.writeln('<h2>你好啊</h2>')

url-loader

当我们往css中使用图片资源的时候，需要安装url-loader

{
    test: /\.(png|jpg|gif|jpeg)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
                    // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
                    limit: 13000,
                    name: 'img/[name].[hash:8].[ext]'
                },
            }
        ]
},

npm install --save-dev url-loader --legacy-peer-deps

这里把图片渲染成了，这里是因为一般是因为url-loader 版本太高的问题。

记得先卸载掉高版本的url-loader，卸载命令为：

npm uninstall url-loader

把版本换低就可以了

npm install --save-dev url-loader@0.6.2 --legacy-peer-deps 

当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.

当加载的图片, 大于limit时, 需要使用file-loader模块进行加载，比如下面这一张图片：

这时候如果我们直接上传的话会：

这时候上传大的文件就需要 file-loader

file-loader