👊拳拳到肉--webpack实战(二)之vue 框架的引入

前言

这是一个系列专栏，将会更新一系列 webpack 的实战内容，主要围绕着旧前端项目现代化，以及现代化前端项目的再优化。

下面开始第二篇：古老项目的 vue 框架的引入

上篇文章写到为古老项目引入 webpack 构建，引入之后，之前的维护 JS 文件顺序，以及不同 JS 文件直接的全局变量冲突的问题都没有了。构建之后文件全部被打包进一个 JS 文件中，这样 html 文件只需要引入一个 JS 文件就可以了。提高了开发成本，维护成本。

不过仅仅使用 webpack 构建是远远不够的，还需要前端框架的引入，这样开发效率才能有飞的提升。

思路分析

还是以 index.html 页面作为例子

现在是原始的 js 文件和样式文件分离状态：

index.js 文件的内容：

引入 vue 的思路：

将 html 中的 tag 标签放在 vue 单文件中的tempalte中，css 样式文件单独引入，或者 copy 出来放在 style 中。
然后创建一个 vue 的入口文件main.js，将上面的单文件引入，并挂载在页面上的#rootdiv 中

实现

先安装必要的依赖：

shell 复制代码

npm i vue@2 vue-template-compiler //vue运行时的依赖
npm i vue-loader@15 // vue编译时的依赖

移植页面内容

创建单文件 App.vue

先移植 DOM 元素以及代码：

将 index.html 文件中的内容 copy 到 App.vue中，分为 html 内容，以及 css 内容

CSS 内容是 index.css 文件中的内容

然后移植 JS 内容，将原先 index.js 内容放到 script 中，并且其中一段$("#home_slider")的代码需要放在 mounted 中，目的是在页面渲染完成之后，才去执行：

然后修改 public/index.html 内容，删除文件中所有元素，只保留一个#root的 div 元素，供 vue 挂载元素使用：

html 复制代码

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>最家首页</title>
	</head>
	<body>
		<div id="root"></div>
	</body>
</html>

创建 main.js 文件，引入 App.vue

javascript 复制代码

import Vue from "vue";
import App from "./App.vue";
import "../css/public.css";
new Vue({ render: (h) => h(App) }).$mount("#root");

由于 public.css 里面是全局的样式，所以在 main.js里单独引入

编写 webpack.vue.config.js 配置文件

javascript 复制代码

const vueLoaderPlugin = require("vue-loader/lib/plugin");

moduel.exports = {
  entry: resolve("./src/main.js"),
	output: {
		path: resolve("dist"),
		filename: "index.js",
	},
  //省略重复代码
  module:{
    rules:[
      {
            test: /.vue$/,
            use: ["vue-loader"],
    },
    ]
  },
  plugins:[
    new vueLoaderPlugin()
  ]
}

配置文件其他地方和上面的配置一致，只需要关注不一样的地方：

入口路径，入口改成了main.js文件
添加了一个编译 rule，用来解析 vue 后缀的文件
使用 vue-loader 时，需要额外引用对应的vueLoaderPlugin，这个要特别注意

添加一个构建脚本：

json 复制代码

{
  "scripts": {
            "build:vue": "webpack -c webpack.vue.config.js"
   },
}

执行构建脚本：

shell 复制代码

npm run build:vue

得到构建产物：

打开index.html页面：

成功

搭建开发环境

一个良好的开发环境，是修改完代码之后，可以在浏览器中立刻看见效果。好在 webpack 提供了给我们hmr 功能，让我们可以通过配置很简单的实现这一点：

javascript 复制代码

module.exports = {
  mode:'development',// dev server要修改成production
  devServer: {
		static: {
			directory: path.join(__dirname, "public"),
		},
		port: 8090,
		open: true,
		historyApiFallback: true,
	},
}

添加 dev 脚本：

json 复制代码

{
  "scripts": {
		"dev": "webpack-dev-server -c webpack.vue.config.js"
	},
}

执行npm run dev, 浏览器页面会自动打开，并且访问localhost:8090：

正常显示

改个代码看看，将 head背景色改成skyblue

vue 复制代码

<style>
.head {
	background: skyblue;
}
</style>

保存代码，页面自动刷新：

配置成功！

第一个页面就这样引入了 vue 框架，如果以后想修改代码，就可以利用 vue 的语法去修改了。

总结

第一个页面 index.html 改造完成，过程比较简单：

将页面中的 DOM 元素以及样式代码放到 vue 文件中对应的位置
准备一个 vue 入口元素
修改配置文件

这个项目不止一个页面，其他页面也改造成 Vue 代码的话，就会面临一个问题，这个 Vue 项目是单页面应用还是多页面应用呢，不同类型的应用有不同的做法，下篇文章就来分享这方面内容吧