2017-08-07读书笔记（Webpack学习笔记3）

今天继续学习Webpack技术。

文章是这篇 入门Webpack，看这篇就够了

在开发的时候，每次修改代码都需要重新打包德华会非常麻烦，于是一种新的技术热更新出现了。每次修改代码保存之后，都会自动构建打包新的代码。

Webpack可以提供这个服务，它会基于node.js构建一个本地服务器，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。

Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。

这里文章的demo中有一处bug

module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      }
    ]
  },

上面的loader应该为“json-loader”，与下载的功能名字相同，不然会报如下错误

ERROR in ./app/Greet.js
Module not found: Error: Can't resolve 'json' in '/Users/xxx/Documents/tryWebp'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'json-loader' instead of 'json',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

这时候我的webpack.config.js是这样的

module.exports = {
  // 打包模式之一，可以用这个打包开发环境，速度较快，但是安全性不足
  devtool: 'eval-source-map',

  // 源文件，从这个文件引申出去的所有文件的来源，这个文件中多有import的都会被一起打包。
  entry:  __dirname + "/app/main.js",

  // 输出文件的名字以及输出路径
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  // JSON loader
  module: {
    loaders: [
      {
        test: /\.json$/,//正则表达式匹配文件名称
        loader: "json-loader"//一个loader的名称，应与下载的名字完全相同
        //include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
        //query：为loaders提供额外的设置选项（可选）
      }
    ]
  },

  // 热更新相关配置
  devServer: {
    port: 8080,
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}

先到这边，剩下明天继续研究。