webpack构建vue项目

1.脚手架vue-cli

npm i vue-cli -g

1.1使用vue-cli初始化项目

  Usage: vue <command> [options]

  Options:

    -V, --version  output the version number
    -h, --help     output usage information

  Commands:

    init           generate a new project from a template   //从指定模板中生成一个新项目
    list           list available official templates  // 列出所有可用的官方模板
    build          prototype a new project     
    create         (for v3 warning only)
    help [cmd]     display help for [cmd]

2.创建项目

vue init webpack my-project

3.webpack目录

这里写图片描述

4.构建工具

编译开发环境

npm run dev

这个命令的配置是在package.json的script属性中设置的，实质上它是由npm来引导执行入口程序dev-server.js完成以下的加载过程：

    加载环境变量-->合并webpack配置-->配置热加载-->配置代理服务-->配置回退支持-->配置静态资源-->加载开发服务器

1.加载环境变量

    从config目录加载index.js和dev.env.js两个模块，准备开发调试环境所必须的一些目录和全局变量

2.合并webpack配置

 在build目录下有三个webpack文件，webpack-merge的包可以进行两个webpack配置之间的合并

这里写图片描述

3.配置热加载

    热加载也就是热刷新，代码更改，webpack就会重新编译，编译文件在浏览器中重新加载

4.配置代理服务器

    模拟服务端。例如向服务器发出一个请求，可以利用代理服务器将请求拦截，然后返回一组这个api应该执行成功的结果。

5.配置静态资源

    将图片，字体，样式以及编译后的js脚本等，生成对应的一些Footprint(印记)存放在由开发服务器托管的一个static虚目录中，使浏览器可以访问到这些资源。每个footprint都是一些hash代码。

6.加载开发服务器

    启动一个express的web服务器，将配置好的模块进行加载，使程序能在浏览器中访问

7.打包命令

npm run build

webpack基本用法
1.样式表的引用
2.字体的引用
3.用别名取代路径引用

在webpack.base.config.js中

这里写图片描述
4.配置多入口程序

首先在build/webpack.base.config.js中的entry的属性中配置入口文件：
这里写图片描述
这是用于告诉webpack哪几个是入口文件，这些文件需要被生成到启动页的script内。
vue-cli的webpack模板使用HtmlWebpackPlugin插件，生成html入口页面并自动将生成后的JS文件和css文件的引用地址写入到页内的script中。

在build/webpack.dev.config.js的plugins中多配置一个HtmlWebpackPlugin插件，用于生成另一个入口页。

这里写图片描述

在config/index.js中设置 build的admin入口

这里写图片描述
在webpack.prod.config.js中配置相同的配置，否则在生产时不会生成admin的入口文件
最后，如果使用了vue-router就得对connect-history-api-fallback插件的配置进行修改，否则原有的默认配置只会将所有的请求发给index.html，这样就会导致history api 没有办法正确的将请求指向admin.html，导致加载失败。

最后在dist中生成两个入口文件index.html和admin.html

这里写图片描述

webpack构建vue项目

webpack构建vue项目

猜你喜欢