最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

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

XAMPP案例 中文小张 39浏览 0评论
本人前言
    对于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之间的暧昧关系