http://wiki.jikexueyuan.com/project/webpack-handbook/ Webpack 中文指南
http://www.itzjt.cc/2017/04/09/webpack/ webpack构建工具（参考）2017-11-27
http://blog.csdn.net/chenqiuge1984/article/details/53009352 webpack PK fis
https://www.webpackjs.com/concepts/ webpack中文文档 2019-7-26
https://www.cnblogs.com/star-wind/p/11254972.html 2019-7-27
$ cnpm install webpack -g # 此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。 $ webpack -h # 进入项目目录 # 确定已经有 package.json，没有就通过 npm init 创建 # 安装 webpack 依赖 $ cnpm install webpack --save-dev # 查看 webpack 版本信息 $ cnpm info webpack # 安装指定版本的 webpack $ cnpm install webpack@1.12.x --save-dev # 如果需要使用 Webpack 开发工具，要单独安装： $ cnpm install webpack-dev-server --save-dev
cnpm install -g css-loader style-loader 安装loader
http://wiki.jikexueyuan.com/project/webpack-handbook/usage.html
初步示例： （webpack之产出js、css文件，不产出index.html文件。需要另外安装插件： HtmlWebpackPlugin）
创建一个静态页面 index.html 和一个 JS 入口文件 entry.js
index.html
<html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html>
entry.js
document.write('It works.')
然后编译 entry.js 并打包到 bundle.js：
$ webpack entry.js bundle.js
用浏览器打开 index.html 将会看到 It works. 。
第二步示例：
接下来添加一个模块 module.js 并修改入口 entry.js：
module.js
module.exports = 'It works from module.js.'
entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块
重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。
Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
Loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
npm install css-loader style-loader #安装 loader
如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。 将 entry.js 中的 require("!style!css!./style.css") 恢复为 require("./style.css")
$ webpack entry.js bundle.js --module-bind 'css=style!css'
配置文件：
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。
http://wiki.jikexueyuan.com/project/webpack-handbook/configuration.html
- package.json 在根目录创建 package.json 来添加 webpack 需要的依赖 （例： https://github.com/owenliang/react-webpack2/blob/master/package.json）
- 运行 npm install
- webpack.config.js 然后创建一个配置文件 webpack.config.js （例：https://github.com/owenliang/react-webpack2/blob/master/webpack.config.js）
- webpack 通过配置文件执行的结果和上一章节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的
插件：
插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。
修改 webpack.config.js，添加 plugins：
var webpack = require('webpack') module.exports = { entry: './entry.js', //入口文件 output: { //输出 path: __dirname, filename: 'bundle.js' }, module: { loaders: [ //loader {test: /.css$/, loader: 'style!css'} ] }, plugins: [ //插件 new webpack.BannerPlugin('This file is created by zhaoda') ] }
开发环境：
# webpack 的编译的输出内容带有进度和颜色。 $ webpack --progress --colors # 编译改为监听模式 $ webpack --progress --colors --watch
使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
# 安装 $ npm install webpack-dev-server -g # 运行 $ webpack-dev-server --progress --colors
故障处理：
# 打印错误详情 $ webpack --display-error-details
..