第四十八篇:webpack的基本使用(二) --安装和配置webpack-dev-server插件
好家伙,
1.webpack中的默认约定
默认的打包入口文件为src -->index.js
默认的输出文件路径为dist -->main.js
既然有默认,那么就说明肯定能改
2.entry和output
在webpack.config.js配置文件中,
通过entry节点指定打包的入口。
通过output节点指定打包的出口。
示例代码如下:
const path = require('path')// 导入 node.js 中专门操作路径的模块,这里的path是node的一个模块
module.exports ={
entry: path.join(_dirname, './src/index.js'),// 打包入口文件的路径
output:{
path: path.join(_dirname, './dist'), // 输出文件的存放路径,这里的path是一个属性
filename: 'bundle.js'//输出文件的名称
}
}
3.webpack 插件安装
现在问题来了
如果我要改index.js中的内容(就算只是改一两行代码),也必须改完内容后保存,再打包,
多次更改下来,显得整个过程显得非常繁琐
有没有什么好的解决办法?
使用webpack插件
3.1.安装方法:
终端跑一下啦:
npm install webpack-dev-server@3.11.2 -D
3.2.webpack 插件的作用
通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来更方便。
3.3.最常用的webpack插件有如下两个:
① webpack-dev-servert
类似于node.js 阶段用到的 nodemon 工具
每当修改了源代码,webpack会自动进行项目的打包和构建
② html-webpack-plugin
webpack中的HTML插件(类似于一个模板引擎插件)
可以通过此插件自定制 index.html页面的内容
4.配置webpack-dev-server
① 修改 package.json->scripts 中的dev 命令,如下:
"scripts": {
"dev": "webpack serve", // script 节点下的脚本,可以通过 npm run 执行
}
②再次运行npm run dev 命令,重新进行项目的打包
③在浏览器中访问 http://localhost:8080地址,查看自动打包效果
(出现了!!出现了!!是"http://localhost:8080"!!!)
注意:webpack-dev-server 会启动一个实时打包的 http 服务器
(像之前写vue项目一样,ctrl+s一次他就更新一次,终端处于监视的状态,监视代码的更新)
于是就解决每次修改代码都需要重新打包的问题了
That's all
溜了溜了
"黑马程序员"NB