webpack-dev-server 和 html-webpack-plugin的使用
webpack-dev-server的作用:自动编译
1、webpack-dev-server的使用
1)cnpm i webpack-dev-server -D
2)在package.json中配置:
3)终端中输入命令:npm run dev
4)浏览器访问http://localhost:8080/
output file[main.js]托管到“/”,所以可以通过地址http://localhost:8080/main.js来访问
在package.json中配置webpack-dev-server时常用的参数:
"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
--open: 自动编译完后打开浏览器
5)修改index.html引入main.js
<script src="/main.js"></script>
2、html-webpack-plugin插件的使用
1)cnpm i html-webpack-plugin
2)webpack.config.js
var path = require('path')
// 导入在内存中自动生成index页面的插件 const HtmlWebPackPlugin = require('html-webpack-plugin') const htmlPlugin = new HtmlWebPackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html' // 生成的内存中首页的名称 }); module.exports = { mode: 'development', plugins: [ htmlPlugin ] }
3)npm run dev,自动打开浏览器访问主页index.html
查看index.html源代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>主页</title> <!-- <script src="../dist/main.js"></script> --> <!-- <script src="/main.js"></script> --> </head> <body> 首页 <div id="app"></div> <script type="text/javascript" src="main.js"></script></body> </html>
插件自动添加一行代码:<script type="text/javascript" src="main.js"></script></body>
posted on 2019-12-04 23:01 wenbin_ouyang 阅读(1103) 评论(0) 编辑 收藏 举报