526互联

webpack-安装和配置webpack-dev-server这个插件

发布时间 2023-05-22 22:24:52作者: Young_Yang_Yang

webpack插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：

  1. webpack-dev-server
    • 类似于node.js阶段用到的nodemon工具
    • 每当修改了源代码，webpack会自动进行项目的打包和构建
  2. html-webpack-plugin
  • webpack中的HTML插件（类似于一个模板引擎插件）
  • 可以通过此插件自定制index.html页面的内容

安装webpack-dev-server

运行如下命令，既可在项目中安装此插件:

npm install webpack-dev-server -D

配置webpack-dev-server

1.修改package.json->scripts中的dev命令如下：

"scripts": {
   "dev": "webpack serve" //script节点下的脚本，可以通过npm run执行
}

2.再次运行npm run dev命令，重新进行项目的打包
3.在浏览器中访问http://localhost:8080地址，查看自动打包效果