Vue学习笔记
webpack
背景
在相应的空白根目录下运行
1 | npm init -y |
而后就会生成一个名为package.json的配置文件
在当前目录,新建src文件夹
在src文件夹内新建index.html和index.js文件
1 | ul>li{这是第$个li}*9 |
在根目录下运行
1 | npm install jquery -S //安装jQuery |
在index.js中输入
1 | // 1.使用ES6导入语法 jQuery |
结果在展示的时候发现,这个css效果并没有展示出来。
具体原因是因为浏览器目前不支持ES6的高级语法,
因此我们需要用到webpack
webpack的安装
在终端运行如下命令,安装webpack相关的两个包
1 | npm install webpack webpack-cli -D |
在原先的package.json的devDependencies框架下能看到相应的包装情况
1 | "devDependencies": { |
webpack的配置
在根目录中,创建名为webpack.config.js的webpack的配置文件并初始化如下的基本配置
1 | module.exports = { |
在package.json的scripts节点下,新增dev脚本如下
1 | "script":{ |
最后在终端中运行npm run dev命令,启动webpack进行项目的打包构建,这其实也就是我们所说的vue的启动
1 | asset main.js 323 KiB [emitted] (name: main) |
此外,在运行文件的时候,调用的不在是原先的index.js而是调用在自动生成的dist文件夹下的main.js文件
webpack的压缩
在原先的webpack.config.js的webpack的配置文件中修改mode参数为production重新run代码即可
1 | module.exports = { |
1 | npm run dev |
但是压缩会比较慢,所以在开发阶段采用的是development在发布产品的时候修改为production
webpack的默认约定
在webpack 4.x和5.x的版本,有如下默认的约定
- 默认的打包入口文件为src ->index.js
- 默认的输出文件路径为dist ->main.js
P.S. 可以在webpack.config.js中修改打包的默认约定
在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口。
例如(在module外加入):
1 | const path = require('path') |
(module中加入)
1 | entry : path.join(_dirname,'./src/index.js') |
最终效果
1 | const path = require('path') |
P.S.在这个情况下,虽然可以实现相关的内容,但是存在的问题是每次都需要重新编译,非常的麻烦,所以需要后续的插件
webpack的插件
通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来更方便。最常用的webpack插件有如下两个
- webpack-dev-server
- 类似于node.js阶段用到的nodemon工具(详细信息可以看我的node.js的学习笔记)
- 每当修改了源代码,webpack会自动进行项目的打包和构建
- html-webpack-plugin
- webpack中的html插件(类似于一个模板引擎插件)
- 可以通过此插件自定制index.html页面的内容
webpack-dev-server的安装
运行以下命令,在项目中安装此插件
1 | npm install webpack-dev-server -D |