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 [email protected] [email protected] [email protected] --save-dev

配置package.json

配置webpack.config.js

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

右击package.json,选择show npm scripts

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

debugger调试

猜你喜欢

转载自blog.csdn.net/jiuweideqixu/article/details/87348562