webpack的基础使用（二）

需求分析1：

在使用webpac打包的时候，只要修改了一点点代码就需要自己手动在重新打包，非常麻烦。
能否进行自动打包，只要修改代码，程序就自动打包？

自动打包的插件 下载、使用：

下载：

npm install webpack-dev-server -D

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

"scripts": {
    "dev": "webpack-dev-server"
 },

将 src -> index.html 中，script 脚本的引用路径，修改为 “/buldle.js”

（ 因为webpack的自动打包后的生成的文件会直接放入内存中，位置是在项目的根目录中。虽然看不到这个文件，但是是能够访问的到的。）

使用：重新运行npm run dev 得到一个实时访问的地址，复制地址打开后，会得到一个如下界面，点击src文件就能访问到修改之后的实时文件界面。

需求分析2：

实时地址打开的不是直接页面，还要在重新点击一下，能否直接打开的就是页面的显示效果呢？？

实现步骤：

要是能复制一份index.html到根目录下，那么是不是直接访问的就是页面的效果而不是文件夹了呢？？

复制index.html的页面的插件、使用

npm install html-webpack-plugin -D

webpack.config.js中的配置代码

const HtmlPlugin = require('html-webpack-plugin')

const htmlPlugin =new HtmlPlugin({
    template: './src/index.html',	// 指定要用到的模板文件
    filename:'./index.html'		 // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})
module.exports = {   
    // plugins 数组是 webpack 打包期间会用到的一些插件列表
    plugins:[htmlPlugin]
}

注意：在下载插件的时候，版本高的问题会导致运行报错。
试过多次高版本不能成功运行。
我下载的版本是

需求3：

能够打包完成之后，自动打开链接？？不用自己动手复制在打开呢
webpack.config.js的配置文件中，有个属性devServer可以设置

或者是另一种方式：在package.json中运行脚本修改设置