第四十八篇:webpack的基本使用(二)

好家伙,

 

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

 

上一篇:'webpack' 不是内部或外部命令,也不是可运行的程序或批处理文件


下一篇:在 Windows Azure 网站中进行纵向扩展和横向扩展