webpack使用（基础入门篇2）

webpack使用（基础入门篇2）

场景引入：
1，场景一
每次修改代码后都需要，在黑窗口上输入npm run dev，非常麻烦；解决方案如下：

使用插件 webpack-dev-server

(1),导入webpack-dev-server
(2),在package.json 里面修改启动环境
### "scripts": {
    "dev": "webpack serve"
}

注意：

安装插件后，webpack打包文件会暂时存在内存中，并且是在放在根目录下。
启动方式修改如下：
(1)index.js页面：

(2)因为webpack-dev-server插件的原因，现在只能在http://127.0.0.1:80/src/index.html启动。

2，场景二

每次启动都比较麻烦，系应该代码后，启动页（index.html）下导入发js代码路径需要修改，启动方式也要变化，比较蛮烦。怎么样实现直接在根目录下启动。

解决思路：只要将src下的index.html复制到根目录下即可。

html-webpack-plugin

//赋值html文件的插件导入
const HtmlPlugin = require('html-webpack-plugin')
//实例化一个HtmlPlugin
const htmlPlugin = new HtmlPlugin({
  //待复制文件
  template: './src/index.html', // 指定原文件的路径
  //复制成功后文件的存放路径
  filename: './index.html' // 指定生成文件的路径
})

注意：同时在module.exports里面需要注册一下上面实例化的HtmlPlugin对象。
代码展示：plugins: [htmlPlugin]

3，场景三

每次启动项目时，都需要输入较多的字符：http://127.0.0.1:8080等,或者需要修改端口号，把端口号改成8888等

这时可以配置一下devServer
效果：
就是再黑窗口里面输入一个npm run dev直接打开index.html

小编：O_O