从零搭建vue2+webpack3项目-上

最新推荐文章于 2022-06-28 10:33:39 发布

有码无尘

最新推荐文章于 2022-06-28 10:33:39 发布

阅读量199

点赞数

分类专栏：前端文章标签： vue webpack

本文链接：https://blog.csdn.net/qq_23003093/article/details/112910976

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、系统环境安装node，此处不再讲解；nrm 的使用

作用：提供了一些常用的 NPM 包镜像地址

运行 npm i nrm -g :全局安装nrm包
使用 nrm ls 查看当前所有可能用的镜像地址
使用 nrm use npm 或 nrm use taobao 切换不同的镜像地址

注意：只是提供了几个下载包的url地址，但是每次装包的时候，都是用 npm

二、项目结构的搭建

创建一个项目文件夹例如webpack-study 作为项目目录
在项目根目录下 npm init -y 初始化项目，会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。
在此项目文件夹，创建

dist文件夹：姓名发布版内容；src文件夹：源代码；
进入 src 文件夹，创建 css、images、js 三个文件夹；并创建文件：index.html首页、main.js项目入口文件；index.html 引入了main.js

三、webpack的安装

运行 npm i webpack -g 全局安装webpack,这样就能全局使用 webpack命令
在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中

四、使用webpack转换

注意：由于ES6的代码太高级了，浏览器解析不了，所以man.js部分代码会报错
在项目根目录中cmd :webpack .\src\main.js .\dist\bundle.js
此时index.html中引入bundle.js便可正常运行

五、webpack配置文件的使用

原因：由于index.html引入的使打包后的bundle.js ，所以在修改main.js后每次都得转换下
解决：

在项目根目录新建 webpack.config.js 文件，用来指定入口（main.js）和出口（bundle.js）
输入以下代码：

//这个配置文件，就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个配置对象
const path = require('path')
module.exports = {
	entry: path.join(__dirname,'./src/main.js'), //入口
	output:{
		path: path.join(__dirname,'./dist'), //指定打包好的文件输出的目录
		filename: 'bundle.js' //指定输出的文件名称
	}
}

之后再修改mian.js 后，只需在根目录cmd: webpack 便可直接打包（按照配置文件中的规则）

六、webpack-dev-server 的基本使用

原因：由于会频繁修改程序，每次都需要 webpack 来打包下才能看到结果
解决：使用webpack-dev-server工具来自动打包编译

项目更目录cmd: npm i webpack-dev-server -D ,-D表示项目开发所需的依赖

安装后，此工具的用法与 webpack 命令的用法完全一样；由于是本地安装的此工具，所以无法在终端中直接运行，只有全局 -g 的工具才能在终端中正常执行
编辑根目录的 package.json 文件，在scripts中添加dev:

     {
         ...
         "scripts": {
			...,
			"dev": "webpack-dev-server" //此处
         }
     }

此工具依赖webpack，即使已经全局安装过，所以项目根目录中还需安装 npm i webpack -D
项目根目录cmd: npm run dev ,便可运行此工具; 后续程序有修改，便可自动打包编译
此工具帮我们打包的bundle.js文件，并没有存放到实际的物理磁盘上，而是托管到了电脑内存中（目的是访问快），所以我们在根目录中找不到打包好的bundle.js；与 index.html 中引入的./dist/bundle.js 是两个文件，此时应该重新引入根目录中的bundle.js；

七、webpack-dev-server的常用配置

原因：打包后启动的服务器（http://localhost:8080/）,不会自动打开浏览器
解决：编辑根目录的 package.json 文件，在scripts中修改dev:

     {
         ...
         "scripts": {
			...,
			"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" //此处open自动打开浏览器；port指定端口;contentBase 指定根路径为src(浏览器打开后默认为首页index.html);hot 无需每次都重新打包，只需编译修改过的部分，且浏览器无刷新重载；
         }
     }

修改完后重启服务 npm run dev
.

八、html-webpack-plugin 的使用

将.html 页面也放于内存中去

安装在内存中生成html的插件
npm i html-webpack-plugin -D
编辑webpack.config.js

//导入插件;只要是插件，都要放到 plugin 节点中去
const htmlWebpackPlugin = require('html-webpack-plugin')

...,
plugins: [ //配置插件的节点
	new htmlWebpackPlugin({ //内存中生成html的插件
		template: path.join(__dirname,'./src/index.html'), //指定模板页面，会根据指定的页面路径，去生成内存中的页面
		filename: 'index.html' //指定生成的页面名称，可重新命名
	})
]