第四十八篇：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