webpack
现代JavaScript应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
- 前端模块化管理和加载工具：模块化
- 编译打包工具：打包
基于Node.js的自动化构建工具。
__dirname：当前执行脚本所在目录
引出
- 浏览器不能直接解析 JSX 和 ES6 语法
- 一切皆模块
全局安装webpack，或者，仅安装到当前目录（推荐，避免版本冲突）：
//全局 npm install webpack -g //当前目录执行 npm install --save-dev webpack
需同时安装 webpack webpack-cli
webpack若要处理js模块之外的文件，需要 loader 载，此处总结下，后续待更新
/// .css 文件
css-loader: css模块依赖解析
style-loader: 创建style标签
/// 处理图片
url-loader
file-loader
/// 辅助编译，bable: 下一代js语法编译器（推荐将babel的配置选项放在单独的.babelrc文件中）
babel-cli
babel-preset-env：解析ES6
babel-core：核心包
babel-loader
babel-preset-es2015
babel-preset-react：解析JSX
关于配置文件，当前目录执行 npm init 会自动创建package.json文件。
核心
- 入口(entry)
- 输出(output)
- modue: loader
- 插件(plugins)
重点关注 loader 和 plugins：
loader
- test：正则表达式
- loader：‘xxx-loader’，若有多个，key值loader应该写为loaders
- includer/exclude：
- query：额外参数配置
注意，webpack loader的执行顺序是从右到左。
plugins
拓展webpack功能。与loaders是在打包构建过程中用来处理源文件相比，plugins是在整个构建过程中生效，执行相关的任务。
插件使用步骤：
- npm install 安装
- 配置文件中新增配置 new xxxx()
提供常用插件：
- Hot Module Replacement(HMR)：自动刷新，实时预览
- uglifyjs-webpack-plugin：js压缩
- ExtractTextPlugin：分离CSS和JS文件
- HtmlWebpackPlugin：依据一个简单的index.html模板，生成一个自动引用打包后的JS文件的新index.html
其中，针对React模块，利用babel的 react-transform-hrm 插件，可以无需额外配置、方便实现热加载功能。
除此四个核心配置之外，还有其他配置参数
- devtool：生成Source Maps，方便调试
- devServer：配置本地开发服务器参数
- resolve：配置短路径引用，避免路径太长
webpack-dev-server
小型Express服务器，本质：监听代码，自动刷新
利用 webpack-dev-server 本地开发服务器，通过 localhost:8080 启动一个 express 静态资源 web 服务器，以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 即可，一个 socket.io 服务会实时监听变化并自动刷新页面。
- 为静态文件提供服务
- 自动刷新和热替换（HMR）
# 安装 cnpm install webpack-dev-server -g # 运行 (--加载进度 --启用监听模式) webpack-dev-server --progress --watch
同时需要在package.json中添加脚本
"scripts": {
"start": "webpack-dev-server --inline --hot --config webpack.config.js",
}
npm start 启动项目即可，其中， --hot 热替换， --inline 自动刷新。
参考