导读 8月科学教育网小李来为大家讲解下。express,scripts这个很多人还不知道,现在让我们一起来看看吧!webpack-dev-server是:为webpack打包生...

8月科学教育网小李来为大家讲解下。express,scripts这个很多人还不知道,现在让我们一起来看看吧!

webpack-dev-server是:

为webpack打包生成的资源文件提供web服务的小型的Express服务器。但是不能当作后台服务器来使用。

主要功能:

静态文件提供服务

自动刷新和热替换

安装插件:

npm i webpack-dev-server -D

安装插件:

npm i -D html-webpack-plugin

该插件主要作用:

1.生成创建html入口文件

2.为html文件中引入的打包的script、link资源

项目文件夹和文件如下:

common.js内容:

entry.js内容:

index.html内容:

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<script src="./dist/dist.js"></script>

<div id="app">hello,webpack</div>

<div><button>按钮</button></div>

</body>

</html>

webpack.base.js内容:

添加了plugins 和 devServer的配置

Package.json里面内容为

{

"scripts": {

"build":"webpack --config build/webpack.base.js",

"dev": "webpack serve --config build/webpack.base.js",

}

}

执行 npm run dev后 访问:127.0.0.1:8080

本文express,scripts到此分享完毕,希望对大家有所帮助。