webpack4与Vue2.x之间的暧昧关系-XAMPP中文组官网

本人前言

对于Vue-cli的强大，使用过的人都知道，极大的帮助我们降低了Vue的入门门槛，但是你只会用自动生成的Vue-cli脚手架工具，但你知道一个Vue-cli项目是怎样搭建起来的吗？所以这篇文章主要来介绍webpack4+Vue搭建自己的Vue-cli。由于刚入门webpack+Vue，深感知识浅薄，所以有什么错误或者有什么问题，请大佬们指出。

阅读本文你需要了解的东西：

熟悉webpack4
熟悉Vue2.x

电脑需要准备的环境：

VS code 或者 HBuilderX
node.js (长期支持版本: 10.16.3)

咳咳….请搬好小板凳

接下来进入正式的项目搭建环节

搭建基本骨架

新建一个文件夹（命名为项目名称）

用VS code打开此文件夹

快捷键ctrl+~打开终端

输入命令：

npm init

一直回车最后输入：yes

接下来文件夹里会生成一个package.json 文件

那这个文件是用来干嘛的？

package.json 文件一般记录了项目的配置信息

包括名称、版本、许可证等元数据

也会记录所需的各种模块

包括执行依赖，和开发依赖，以及scripts字段。

接下来安装webpack4，在终端输入

npm install webpack webpack-cli --save-dev#  或者-D，因为 --save-dev = -D

（有安装淘宝镜像的可以用cnpm安装会快一点）

或许没学过node.js的人又会问

–save和-dev的命令是干嘛的

这里来学习一下一些npm的常用命令：

npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置# moduleName为要安装的东西# 要看 npm config prefix 的位置。

npm install -save moduleName # -save 的意思是将模块安装到项目目录下# 并在package文件的dependencies节点写入依赖。

npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下 # 并在package文件的devDependencies节点写入依赖。

想了解更多命令? 附上博客地址：

https://blog.csdn.net/weixin_42142216/article/details/92431685

在根目录下新建文件夹src

在src文件下新建文件 main.js

在main.js输入测试代码：

console.log("我是main.js")

在根目录下新建文件：

webpack.config.js

输入以下代码：

const path = require('path')// 指定相对目录路径 module.exports = {entry: './src/main.js', //入口文件 output: {//node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径   path: path.resolve(__dirname, './src/dist'), //输出文件目录 filename: 'index.js' //输出文件 } }

进行文件打包，命令行输入：

npx webpack --config webpack.config.js

这时它提示打包成功

在src/目录生成了一个dist文件夹
并输出了index.js文件

到了这里说明环境是没有问题的

接着来开始配置初始生产环境(此处都用淘宝的cnpm)：

(1) 安装vue-loader

cnpm install webpack vue vue-loader -D

安装成功，然后根据提示再安装插件：

cnpm install webpack css-loader -D

(2)安装vue-template-compiler

cnpm install vue-template-compiler -D

安装成功后在src/目录下新建 app.vue

输入以下代码:

<template><div> 你好 {{ data }}</div></template><script>export default { data(){return { data: "涛涛" } } }</script><style scoped></style>

.vue文件是无法直接运行的
需要在webpack里面配置loader

这时我们来改一下mian.js文件，输入：

import Vue from 'vue'import App from './app.vue'const root = document.createElement('div')document.body.appendChild(root)new Vue({ render: (h) => h(App)}).$mount(root)

接着改写 webpack.config.js 文件:

const path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {  entry: path.resolve(__dirname, 'src/main.js'), //入口文件  output: {    //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径    path: path.resolve(__dirname, 'src/dist'), //输出位置    filename: 'index.js' //输入文件  },  mode: 'production', //暂时指定为生产环境  module: {    rules: [{      test: /\.vue$/, //规则，支持z正则表达式      loader: 'vue-loader'    }]  },  plugins: [    new VueLoaderPlugin()  ]}

在package.json的”scripts”里添加：

"build": "webpack --config webpack.config.js"

(实际上这个”build”就是”npm run build”里面的”build”，为了每次方便编译预先写好)

输入命令进行打包：

npm run build

不出意外的话，到了这里是运行打包成功的

我们需要验证打包文件时候是否正确

所以这里使用插件HtmlWebpackPlugin

帮我们自动创建html文件

并且在后续的hash文件名上很有用

具体可以看官方介绍

命令行输入：

cnpm install html-webpack-plugin -D

再次修改webpack.config.js代码，引入插件：

const path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin');var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {  entry: path.resolve(__dirname, 'src/main.js'), //入口文件  output: {    //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径    path: path.resolve(__dirname, 'src/dist'), //输出位置    filename: 'index.js' //输入文件  },  mode: 'production', //暂时指定为生产环境  module: {    rules: [{      test: /\.vue$/, //规则，支持z正则表达式      loader: 'vue-loader'    }]  },  plugins: [    new VueLoaderPlugin(),    new HtmlWebpackPlugin()  ]}

用npm run build进行打包：

转载请注明：XAMPP中文组官网 » webpack4与Vue2.x之间的暧昧关系

webpack4与Vue2.x之间的暧昧关系

与本文相关的文章

您必须登录才能发表评论！

与本文相关的文章

您必须 登录 才能发表评论！

您必须登录才能发表评论！