新知一下
海量新知
6 0 7 1 4 1 4

59.Vue 使用webpack构建vue项目

Devops社群 | 分享Devops技术栈 2020/08/27 02:37

前言

在前面的篇章中,已经说明了 webpack4 的基本使用,那么本章节开始在 webpack4 中构建vue项目,同时对比看看这种构建方式,与在网页script导入 vue.js 中的区别。

构建webpack项目开发

首先重新构建webpack项目。

初始化项目文件结构

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312074244099

初始化 package.json 文件

package.json 使用存储记录 npm 安装相关包版本即可的。执行以下命令进行初始化:

npm init -y

执行如下:

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312074427333

安装webpack

安装webpack工具至本地项目中:

npm i -D webpack webpack-cli

在项目根目录创建、编写配置文件 webpack.config.js

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312075615058
const path = require('path');

// 这个配置文件,起始就是一个 JS 文件,通过 Node 中的模块操作,向外暴露了一个 配置对象
module.exports = {
    // 在配置文件中,需要手动指定 入口 和 出口
    entry: path.join(__dirname, './src/main.js'),// 入口,表示,要使用 webpack 打包哪个文件
    output: { // 输出文件相关的配置
        path: path.join(__dirname, './dist'), // 指定 打包好的文件,输出到哪个目录中去
        filename: 'bundle.js' // 这是指定 输出的文件的名称
    },
};

一般来说,现在就可以执行 webpack 命令进行打包了,但是我在上面将 webpack 安装到本地项目中,所以还需要编写 npm 执行内部命令的脚本,才能够执行。

在 package.json 配置执行本地 webpack 执行命令

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312075856551
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"
  },

好了,配置了这个之后,就可以使用 npm run 脚本名称 来执行了,执行如下:

npm run build
新知达人, 59.Vue 使用webpack构建vue项目
image-20200312080049049

可以看到已经可以成功编辑打包出 bundle.js 压缩文件了。

编写 main.js 打印信息,设置 index.html 引用 bundle.js 脚本

首先在 main.js 写一个打印信息,如下:

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312080315055
console.log("hello world");

然后在 index.html 引入 bundle.js ,如下:

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312080625550
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../dist/bundle.js" rel="external nofollow" alt="新知达人, 59.Vue 使用webpack构建vue项目" ></script>

</body>
</html>

安装babel

安装babel至本地项目中:

npm i -D babel-loader @babel/core

为了转化 es6 代码,要安装 babel 插件:

npm i -D @babel/preset-env @babel/polyfill

安装防止全局污染babel插件

npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime @babel/runtime-corejs2

注意:使用 -D 也就是 --save-dev ,将其安装好测试开发环境, 而 -S 也就是 --save ,将其安装到生产环境的依赖中。

在根目录下创建 babel 配置文件 .babelrc:

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312082729082
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

注意:"corejs": 2, // 这里设置2是因为上面安装的版本是 @babel/runtime-corejs2

配置webpack.config.js设置使用babel的规则

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312082908900
module: {
  rules: [
    { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

在main.js中写入ES6语法,查看打印信息

在安装babe将ES6ES7转化低于语法ES5之前,我先经过测试,发现使用ES6的语法在chrome浏览器是能够支持运行的,而在IE则会报语法错误,如下:

main.js 代码如下:

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312083055873

// ES5
console.log("hello world es5");

// ES6
class Bar {
    doStuff() {
        console.log('stuff bar');
    }
}

var b = new Bar();
b.doStuff(); // "stuff"

// ES6
class Foo {
    static classMethod() {
        return 'hello static foo';
    }
}

console.log(Foo.classMethod()); // 'hello'

执行 npm run build 打包编译一下,看看 ie浏览器能否识别打印高级语法的信息,如下:

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312084020364

安装 webpack-dev-server

安装webpack-dev-server至本地项目:

npm i webpack-dev-server -D

运行webpack-dev-server命令

package.json scripts 编写执行命令,如下:

 "scripts": {
    "dev": "webpack-dev-server"
  },

启动了server服务之后,输入文件的路径修改为 / 根路径

启动执行服务如下:

npm run dev
新知达人, 59.Vue 使用webpack构建vue项目
image-20200312231921160

修改 index.html 引入 bundle.js 的路径,并且删除dist目录下的 bundle.js 文件

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312232132579

访问 http://localhost:8080/src/

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312232236866

webpack-dev-server的常用命令参数

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312232529354
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

-- open : 设置启动服务自动打开浏览器

--port 端口号 :配置服务启动端口号

--contentBase src : 启动服务设置 index.html 的所在目录

--hot :设置采用补丁的方式热更新

使用 html-webpack-plugin 插件配置启动页面

前面在配置生成 bundle.js 的使用时候,已经将其存储在内存中编译生成。那么能不能将 index.html 页面也加载存储到内存中呢?

这个当然可以,可以使用 html-wabpack-plugin 插件来完成这部分工作。

安装 html-wabpack-plugin 插件

npm i html-webpack-plugin -D

webpack.config.js 配置文件中配置

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312233125296
const path = require('path');

// 导入在内存中生成 HTML 页面的 插件
// 只要是插件,都一定要 放到 plugins 节点中去
// 这个插件的两个作用:
//  1. 自动在内存中根据指定页面生成一个内存的页面
//  2. 自动,把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin');

// 这个配置文件,起始就是一个 JS 文件,通过 Node 中的模块操作,向外暴露了一个 配置对象
module.exports = {
    // 在配置文件中,需要手动指定 入口 和 出口
    entry: path.join(__dirname, './src/main.js'),// 入口,表示,要使用 webpack 打包哪个文件
    output: { // 输出文件相关的配置
        path: path.join(__dirname, './dist'), // 指定 打包好的文件,输出到哪个目录中去
        filename: 'bundle.js' // 这是指定 输出的文件的名称
    },
    devServer: { // 这是配置 dev-server 命令参数的第二种形式,相对来说,这种方式麻烦一些 //  --open --port 3000 --contentBase src --hot
        open: true, // 自动打开浏览器
        port: 3000, // 设置启动时候的运行端口
        contentBase: 'src', // 指定托管的根目录
        hot: true // 启用热更新
    },
    plugins: [ // 配置插件的节点
        new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
            template: path.join(__dirname, './src/index.html'), // 指定 模板页面,将来会根据指定的页面路径,去生成内存中的 页面
            filename: 'index.html' // 指定生成的页面的名称
        })
    ],
    module: {
        rules: [
            { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
};

启动服务,发现bundle.js被自动引入

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312233247458

这个插件的两个作用:

  1. 自动在内存中根据指定页面生成一个内存的页面
  2. 自动,把打包好的 bundle.js 追加到页面中去

使用webpack打包css文件

安装 style-loader css-loader 工具,用于处理 css 文件

npm i style-loader css-loader -D

webpack.config.js 这个配置文件设置匹配 css 文件处理的插件

 { test: /.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
新知达人, 59.Vue 使用webpack构建vue项目
image-20200312233535053

使用webpack打包less文件

安装less-loader less工具来处理less文件

npm i less-loader less -D

webpack.config.js 配置文件设置匹配less文件的处理

{ test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
新知达人, 59.Vue 使用webpack构建vue项目
image-20200312233742750

使用webpack打包sass文件

安装sass-loader node-sass工具来处理sass文件

cnpm i sass-loader node-sass -D
cnpm i sass fiber -D

webpack.config.js 配置文件设置匹配scss文件的处理

{ test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则

webpack 中 url-loader 的使用

安装url-loader

cnpm i url-loader file-loader -D

webpack.config.js 中添加处理url路径的loader模块:

{ test: /.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=500&name=[hash:8]-[name].[ext]' },

上面这种输入参数的方式还有另一种方式,以对象的键值对方式,如下:

{
    test: /.(jpg|png|gif|bmp|jpeg)$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 500,   //是把小于500B的文件打成Base64的格式,写入JS
            name: '[hash:8]-[name].[ext]' // [hash:8] 在名称前面设置8位哈希值,[name] 设置文件的原名, [ext] 设置文件的原后缀
        }
    }]
},// 处理 图片路径的 loader

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312234328889

区分webpack中导入vue和普通网页使用script导入Vue的区别

上面已经构建好了webpack的基本使用组件,那么下面可以开始在webpack中开始探讨使用vue的方法。

那么首先来回顾一下普通网页使用script导入vue的过程,如下:

  1. 使用 script 标签 ,引入 vue 的包
  2. 在 index 页面中,创建 一个 id 为 app div 容器
  3. 通过 new Vue 得到一个 vm 的实例

通过这三个步骤,我们就可以开始 vue 开发了。但是在webpack中也是这样么?

安装vue库

首先在项目本地安装 vue 库先,如下:

cnpm i vue -S

将vue安装到生产依赖中,执行如下:

新知达人, 59.Vue 使用webpack构建vue项目
image-20200312235724746

在webpack尝试导入vue 以及 创建 vm

1. 上面安装完毕vue库之后,下面在 main.js 尝试导入 vue,如下:

// 导入vue
import Vue from 'vue'

2.创建vm实例

// 创建vm
var vm = new Vue({
    el: '#app',
    data: {}
});
image-20200313000436386

3.在index.html创建app容器

image-20200313001123873

4.在vm的data中设置一个msg值,然后在app中渲染看看

main.js 如下:

image-20200313001259475

index.html 渲染数据如下:

image-20200313001332174

启动服务查看是否正常渲染效果,如下:

image-20200313001432954

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这里提示使用 vue.runtime.esm.js 只会构建运行时的 vue 代码,无法使用模板编译。提示可以使用 render 方法返回组件,或者使用内置的编译器构建。

5.问题的根本原因:

在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供 像网页中那样的使用方式;

那么如果想要使用网页 script 直接导入的方式,这时候就需要导入完整的 Vue 功能的js。那么这个完整的 Vue 功能 js 其实就是需要在 nodemodules 里面去查找。

包的查找规则

1.找项目根目录中有没有 node_modules 的文件夹

2.在 node_modules 中 根据包名,找对应的 vue 文件夹

3.在 vue 文件夹中,找 一个叫做 package.json 的包配置文件

4.在 package.json 文件中,查找一个 main 属性【main属性指定了这个包在被加载时候的入口文件】

image-20200313074617634

这说明当 import 这个库的时候,则会导入 main 属性指定的文件。

如果需要想要完整的功能,应该是要导入完整的 vue.js ,如下:

image-20200313074819161

6.修改导入vue库的方式,使其支持完整功能

如果想要修改导入vue的 js,有两种方式,

第一种就是直接在 vue 库的package.json中main中修改引入的文件,

第二种则是 import 的时候直接手写引入的文件路径。

先来看看第一种,如下:

将原来引入的代码

  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",

改为

  "main": "dist/vue.min.js",
  "module": "dist/vue.min.js",
image-20200313080326838

此时,再来编译服务,可以看到浏览器正常渲染数据了。

image-20200313080448628

但是一般来说,我们不会修改库的文件方式。下面来看看第二种,再次之前将库文件的main属性改回去。

第二种方式:
image-20200313080817760

此时查看编译后能否查看渲染数据,如下:

image-20200313080904325

可以看到也可以正常如同网页 script 引入一样渲染数据了。

但是如果将导入vue写成这样路径写法:

import Vue from '../node_modules/vue/dist/vue.min.js'

看上去非常不优雅,能否依然是写成

import Vue from 'vue'

但是又不修改vue库的main属性,又可以导入实际 vue.min.js 完整功能的脚本呢?

此时就要使用 resolve 属性来设置导入库别名 alias 了。

7.在 webpack.config.js 中添加 resolve 属性:

首先将导入包的方式改回去,如下:

image-20200313081516536

webpack.config.js 添加 resolve 属性,如下:

image-20200313081650308
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.min.js'
        }
    }

再次编译运行服务,确认是否模板渲染正常,可以发现也是可以正常渲染的。

总结区别

从上面的过程中可以发现webpack默认导入vue的话,导入的是 run-time-only 的非完整js,而我们在普通网页中使用的,一般导入完整的vue库文件。

如果需要修改使用模板渲染的功能,那么只能修改一下vue导入的文件了。

在vue中结合render函数渲染指定的组件到容器中

那么是否存在我依然使用 run-time-only 的vue库,依然可以将组件渲染到 app容器的方式呢?

这个当然有,就是使用 render 函数。

为了演示效果,我们先将上面设置的 alias 注释,改回使用 run-time-only 库。

image-20200313083255631

下面来创建一个login组件,然后将其渲染到容器中。

1.创建login组件

// 创建login组件
var login = {
    template: "<h1>这是login组件。</h1>"  
};

2.首先按照完整功能的方式注册到vm中,然后在index.html中使用组件,查看能否正常

main.js 中注册组件login

image-20200313083536510

index.html 中使用组件login

image-20200313083626270

启动服务,查看能否正常显示,如下:

image-20200313083717640

3.将login组件写到 login.vue 文件中,然后使用render函数来渲染组件

在上面的示例看到,使用 run-time-only vue ,无法使用模板直接在 vm 中渲染组件。那么下面我们抽离 login 组件出来到 login.vue 文件中,然后使用 render 来返回渲染 login 组件。看看效果。

3.1 编写 login.vue 文件

image-20200314163106051
<template>
    <div>
        <h1>这是login登录组件</h1>
    </div>
</template>

<script>
</script>

<style>

</style>

可以看到 vue 文件主要分为了三部分:template 、script、 style

那么下面先来看看如果直接当作组件导入会是什么效果。

3.2 导入login组件

image-20200314163337769

那么下面启动服务,看看页面,如下:

image-20200314163450829

3.3 安装编译vue文件的插件

默认webpack是无法编译vue文件的,需要安装相关的插件。

安装命令:

npm i vue-loader vue-template-compiler -D
npm i vue-loader-plugin -S

执行如下:

image-20200314163840735
image-20200314164612923

webpack.config.js 中,添加如下 module 规则:

image-20200314163953290
{ test: /.vue$/, use: 'vue-loader' }, // 配置处理 .vue 文件

还要配置插件:

image-20200314164836876
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

再次编译,此时已经没有报错了,页面只是提示 runtime-only 的告警信息,如下:

image-20200314164937065

3.4 使用render函数渲染组件

image-20200314165749702
    // 使用render函数渲染组件
    render: function (createElements) {
        return createElements(login)
    }

此时网页看看是否成功渲染组件,如下:

image-20200314165831851

可以看到已经成功渲染组件了。

下面简写一下render函数,如下:

image-20200314165942875
    // 使用render函数渲染组件
    render: c => c(login)

总结

总结梳理: webpack 中如何使用 vue :

  • 1.安装vue的包: cnpm i vue -S

  • 2.由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件的

npm i vue-loader vue-template-compiler -D
npm i vue-loader-plugin -S
  • 3.在 main.js 中,导入 vue 模块 import Vue from 'vue'
  • 4.定义一个 .vue 结尾的组件,其中,组件有三部分组成: template script style
  • 5.使用 import login from './login.vue' 导入这个组件
  • 6.创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
  • 7.在页面中创建一个 id app div 元素,作为我们 vm 实例要控制的区域;

更多精彩原创Devops文章,快来关注我的公众号:【Devops社群】 吧:

image
image

新知精选

更多新知精选