webpack和webpack-dev-server示例

一、webpack的使用

webpack的优点

---

npm包的三种安装方式

---

为了方便使用，可以使用全局安装的方式来安装webpack

npm install -g webpack

但是，在较新版本的webpack中，还需要安装webpack-cli

npm install -g webpack-cli

然后来看看我们的项目结构：

main.js是打包的入口，main.js中包含业务处理逻辑。

运行命令打包

在html中引入生成的build.js文件

---

二、webpack-dev-server的安装和使用。

运行命令(npm init)，生成package.json文件

npm init

安装：

npm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

配置package.json

配置webpack.config.js

在webpack.config.js中配置html-webpack-plugin插件
 

右击package.json，选择show npm scripts

双击dev,启动运行，则会自动跳出html页面，并且html页面自动刷新，无需手动刷新

 

debugger调试