Vue

Vue学习笔记

webpack

背景

在相应的空白根目录下运行

1
npm init -y

而后就会生成一个名为package.json的配置文件

在当前目录,新建src文件夹

在src文件夹内新建index.html和index.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
ul>li{这是第$个li}*9
<!--上述代码回车后的效果同下-->
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
</ul>

在根目录下运行

1
npm install jquery -S //安装jQuery

在index.js中输入

1
2
3
4
5
6
7
8
9
// 1.使用ES6导入语法 jQuery
import $ from 'jquery'

//定义jQuery的入口函数

$(function() {
$('li:odd').css('background-color', 'red')
$('li:even').css('background-color', 'pink')
})

结果在展示的时候发现,这个css效果并没有展示出来。

具体原因是因为浏览器目前不支持ES6的高级语法,

因此我们需要用到webpack

webpack的安装

在终端运行如下命令,安装webpack相关的两个包

1
npm install webpack webpack-cli -D

在原先的package.json的devDependencies框架下能看到相应的包装情况

1
2
3
4
"devDependencies": {
"webpack": "^5.52.0",
"webpack-cli": "^4.8.0"
}

webpack的配置

在根目录中,创建名为webpack.config.js的webpack的配置文件并初始化如下的基本配置

1
2
3
module.exports = {
mode:'development' // mode用来指定构建模式 development 或 production
}

在package.json的scripts节点下,新增dev脚本如下

1
2
3
4
"script":{
"dev":"webpack"
//script 节点下的脚本,可以通过npm run执行。例如npm run dev
}

最后在终端中运行npm run dev命令,启动webpack进行项目的打包构建,这其实也就是我们所说的vue的启动

1
2
3
4
5
6
asset main.js 323 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 282 KiB
./src/index.js 210 bytes [built] [code generated]
./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
webpack 5.52.0 compiled successfully in 350 ms

此外,在运行文件的时候,调用的不在是原先的index.js而是调用在自动生成的dist文件夹下的main.js文件

webpack的压缩

在原先的webpack.config.js的webpack的配置文件中修改mode参数为production重新run代码即可

1
2
3
module.exports = {
mode:'production' // mode用来指定构建模式 development 或 production
}
1
npm run dev

但是压缩会比较慢,所以在开发阶段采用的是development在发布产品的时候修改为production

webpack的默认约定

在webpack 4.x和5.x的版本,有如下默认的约定

  1. 默认的打包入口文件为src ->index.js
  2. 默认的输出文件路径为dist ->main.js

P.S. 可以在webpack.config.js中修改打包的默认约定

在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口。

例如(在module外加入):

1
const path = require('path')

(module中加入)

1
2
3
4
5
6
entry : path.join(_dirname,'./src/index.js')
//这里的_dirname表示的是pack.config.js当前所在的根目录
output:{
path: path.join(__dirname,)
filename:''
}

最终效果

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path')

module.exports = {
mode: 'development',// mode用来指定构建模式 development 或 production
entry:path.join(__dirname,'./src/index.js'),
//告诉需要转化的js相应的路径
output:{
path: path.join(__dirname,'./dist')//生成的文件路径
filename:'main.js'//生成的文件名
}

}

P.S.在这个情况下,虽然可以实现相关的内容,但是存在的问题是每次都需要重新编译,非常的麻烦,所以需要后续的插件

webpack的插件

通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来更方便。最常用的webpack插件有如下两个

  1. webpack-dev-server
  • 类似于node.js阶段用到的nodemon工具(详细信息可以看我的node.js的学习笔记)
  • 每当修改了源代码,webpack会自动进行项目的打包和构建
  1. html-webpack-plugin
  • webpack中的html插件(类似于一个模板引擎插件)
  • 可以通过此插件自定制index.html页面的内容

webpack-dev-server的安装

运行以下命令,在项目中安装此插件

1
npm install webpack-dev-server -D