WEBPACK基础入门（三）-原创手记-慕课网

plugin , 中文翻译为 “插件” 。所谓插件，就是我们需要添加什么额外的功能，就可以插入一个相应功能的插件，十分便利。插件是一个可选项，不像前面几个配置 entry 、output、loader那样是必须配置的。没有plugin ，我们的webpack也能将代码打包。
　　 但是，plugin可以让我们的操作更便捷，功能更强大。我个人认为plugin才是webpack的灵魂所在。

　其实虽然都是要引入的依赖。但plugin就是一个js对象，不能独立执行，而loader是一个文件夹，有cmd文件可以在命令行中执行。

　　接下来简要介绍一下比较常用的几个插件

HTMLWebpackPlugin

我们使用webpack是将代码打包成目标文件 ,我们可以再把目标文件(js文件)引入到html文件中。但是我们觉得再创建html文件，然后手动引入目标文件（还要考虑到路径）好麻烦，我们更希望在项目开发中就创建html文件，然后打包的过程中自动引入js文件，生成目标html文件。这时就可以使用HTMLWebpackPlugin插件。

我们可以在项目中建立一个模板html文件，然后自动插入js脚本

//plugin使用时必须要引入
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
  entry:[ "index" : "./src/page/entry/index.js" ,
            "login" : "./src/page/entry/login.js" ,
             'result': "./src/page/entry/result.js" ]
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'   
  },
  // plugins: [new HtmlWebpackPlugin()]   //这样可以生成一个空的html文件
   new HtmlWebpackPlugin({
             template : "./src/view/a.html",  //模板文件地址
             filename : "view/a.html",   //目标文件地址
             title    : title,
             chunks   :[name]  //引入哪些模块 ，对应entry里面的文件
                                         //比如["index","login"]引入index.js和login.js
          })
};

HotModuleReplacementPlugin

HotModuleReplacePlugin也是一个极为有效的插件，和devServer搭配使用最佳。在开发时一定有这样的经历，每次修改代码，页面都要刷新，然后你输入的数据全部都要重新输入：
图片描述

（特别是这样的注册，一次次输入注册信息，简直要命）
使用HotModuleReplacementPlugin，修改后，会不刷新页面就更新。

//可以满足正常功能，也可以添加配置
new webpack.HotModuleReplacementPlugin()

（其他plugin，以后有机会再探讨，感觉这两个基本就够用了）

mode

mode比较简单，就是针对工作环境给webpack做一些默认优化，再编写调试阶段一般选择development ，上线时可以选择production，也可以任性地设为none.
eg:

module.exports = {
  mode: 'development'
}

webpack-dev-server

代码运行需要环境，在以往地开发中，只有等后端搭好服务器，前端才能把自己的代码挂载上去，然后测试代码是否正确，这样就十分麻烦，不高效。通过webpack-dev-server,我们可以搭建一个简易的本地服务器，让我们的代码跑起来，就可以针对性修改代码。如果你的功力高深，甚至可以写个复杂的服务器脚本(然鹅我比较菜）。
下载好webpack-dev-server,我们可以直接在命令行启动，webpack-dev-server或者node_modules/.bin/webpack-dev-server ，也可以配置快捷命令（前面讨论过）。
　　我们也可以在指定服务器的一些信息，比如在计算机哪个端口打开等

 devServer: {
    contentBase: path.join(__dirname, 'dist'),  //目标文件目录
    compress: true,
    port: 9000
  }