Webpack入门教程三

上一篇文章中我们学习了如何使用webpack.config.js配置文件，但是运行webpack命令打包过后由于目录的原因，我们需要手动修改目录或者移动文件。

那么这一章我们学习plugin插件的使用，它将极大地便利我们的工作。

html-webapck-plugin插件

首先，解决上一章留下的问题，我们通过plugin插件直接在打包的文件中生成html文件，直接打开便可看到效果。

    // 安装html-webpack-plugin插件
    npm install html-webpack-plugin --save-dev
    //可能会warnning提示缺少其他的依赖，按照提示安装便可

修改我们的webpack.config.js文件:

    //引入html-webpack-plugin
    var htmlWebpackPlugin = require('html-webpack-plugin');
    ......省略内容跟上一篇章中一样
    plugins: [
      new htmlWebpackPlugin({
        title: 'Hello,Plugin',
        h1: 'use Plugin'
      })
    ]

ProvidePlugin插件:

ProvidePlugin插件可以使用指定的indentifier去替代引入的module，全局有效。

    //在上面webpack.config.js文件的基础上
    plugins: [
      ...
      new webpack.ProvidePlugin({
         $ : 'jquery' 
       })
    ]

NoErrorsPlugin插件：

这个插件可以把Webpack编译过程中的的错误的日志省略掉，不包含在最终的发布版本中。

    //同上的webpack.config.js基础
    plugins:[
      ...
      new webpack.NoErrorsPlugin()
    ]

IgnorePlugin插件：

这个插件可以指定打包是不处理某个模块。

    //webpack.config.js同上
   plugins: [
      ...
     new webpack.IgnorePlugin(/\.XXX.js$/);
    ]

更多的插件介绍请查看官方文档：Webpack Plugins

配置relolve参数：

    resolve.extensions: 自动拓展文件的后缀名，在使用require引入模块不用后缀名
    resolve.alias: 模块别名的定义，抛弃地址定位直接使用别名

    //在webpack.config.js中加入：
    module.exports = {
      ...
      resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
          a : 'src/js/a.js',
          b : 'src/js/b.js'
        } 
       },
      ...
    }

relolve.alias和plugin中的ProvidePlugin插件的关系：

使用relove.alias只是替代require引入模块长长的一段地址定位，方便通过别名去引入，而使用ProvidePlugin插件指定的标识符已经跟需要require的模块绑定，使用的时候直接用标识符不需要再require。

配置Webpack-dev-server代理:

webpack-dev-serve是一个小型的Node.js Express服务器，能够可以直接将我们的webpack里的项目直接跑起来。

    //webpack.config.js上添加
    module.exports = {
      ...
      devServer: {
        historyApiFallback : true,  //访问服务器上不存在的资源将重定向到index.html页面
        inline: true,  //文件发生变化时，更新页面
        hot: true,  // 热模块替换，只更新文件变化的那一部分
        progress: true  //显示打包的进度
      },
       ...
    }

在终端中直接使用webpack-dev-server --hot --progress --inline就可以跑起来了。
为了方便以后调试，在package.json文件中加入语句：

    //package.json
    ...
    start : "webpack-dev-server --hot --progress --inline --colors",
   //同样，为方便以后webpack命令我们也可以加入
    build : "webpack --progress --colors"
    ...

在终端中输入npm start，就会提示打开http://localhost:8080