webpack的plugins插件

安装：
cnpm i webpack-dev-server --save-dev
配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replace，即每次webpack编译之后，还需要手动刷新浏览器。
webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹。
loaders用来转换某种特定类型的module，plugins则用来在一些合适的时机执行一些特定的任务，比如代码分割、静态资源处理、环境变量的注入、将所有css的module抽取为单个文件等。webpack自身也是用插件系统构建起来的。插件的目的是做任何loaders做不了的事情。
在devServser下使用:

webpack提供了一个可以动态生成html文件的插件:html-webpack-plugin
html-webpack-plugin可以为生成的html页面自动添加静态资源引用的script标签
还有常用插件:clean-webpack-plugin,webpack打包输出前删除指定目录代码
安装：
cnpm install html-webpack-plugin clean-webpack-plugin --save-dev

// 自动生成html的插件-根据模板页面生成新的页面
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除之前打包的文件
var CleanWebpackPlugin = require('clean-webpack-plugin');
  devServer: {
        contentBase: 'dist/'
    },
    plugins: [
        // 使用模板./index.html根据当前的index.html页面生成新的页面
       new HtmlWebpackPlugin({template: './public/index.html'}),
        // 需要使用插件清除的文件名,当执行webpack命令时会先将指定目录下的文件删除
        new CleanWebpackPlugin(['dist']),
    ]

由于html-webpack-plugin可以自动为我们生成html页面,所以我们将html里面写死的js引用删除
html-webpack-plugin插件按照配置,使用根目录下index.html为模板生成页面
放入output.path配置的输出目录’dist’下
新生成的dist/index.html中自动添加了引用bundle.js的script标签
index.html和静态资源在同一目录下,所以不存在引用路径找不到的问题
所以可以将output.publicPath: '/dist’配置项注释掉