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/地址输入网页，代码保存之后就会自动刷新页面
