webpack热加载

webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

它[高度可配置的，有四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

webpack 是需要传入一个配置对象。取决于你如何使用 webpack，可以通过两种方式：终端或 Node.js。
新建一个文件webpack.config.js,这个命名是固定的，要记住。

一、全局安装

1、安装webpack
npm install -g webpack，使用全局变量-g来安装
2、安装webpack开发服务器
npm install -g webpack-dev-server

二、当前项目安装

1、安装好webpack之后，要在目录文件下安装一遍，也就是去掉命令中的-g输入npm install webpack-dev-server --save，
2、然后输入npm install webpack --save

三、初始化配置

1、在文件webpack.config.js设置内容

var webpack = require('webpack');
var path = require("path");

module.exports = {
    entry: "./src/js/index.js",
    output: {
        path: __dirname,
        filename: "bundle.js",
        publicPath: "/src/"
    },

    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            include: __dirname,
            query: {
                presets: [ "es2015", "react" ]
            }
        }]
    }
};

四、打包

webpack
webpack --watch

1、在cmd中输入webpack进行运行
如果出现报错ERROR in Entry module not found: Error: Can't resolve 'babel-loader',则需要安装包npm install babel-loader --save
2、在cmd中报错Cannot find module 'babel-core'，则需要安装包npm install babel-core --save
3、输入webpack,运行成功后

在文件夹中生成文件“bundle.js”

4、生成“bundle.js”后，在html文件中，在script中引入bundle.js

5、在cmd中输入命令webpack --watch让webpack时刻关注代码，有变动立马更新，但是需要手动刷新页面才会显示

五、项目热加载

如果需要页面实现自动刷新，要在命令行中输入webpack-dev-server --inline --hot，会返回Project is running at http://localhost:8080/,将http://localhost:8080/地址输入网页，代码保存之后就会自动刷新页面

ChromeReact插件使用