插件
1.Webpack Manifest Plugin
该插件可以显示出编译之前的文件和编译之后的文件的映射
###webpack.config.js
new webpackManifestPlugin({
basePath:'orgin-'
})
webpack 编译后会生成manifest.json 如下：
{
"orgin-index.js": "index-min1.js",
"orgin-icon.jpg": "50c1acd81e4a661f3c3be338aff6e77c.jpg",
"orgin-index.html": "index.html"
}
配置
source map
| id | devtool | 生产环境 | 品质(quality) |
|---|---|---|---|
| 1 | (none) | yes | 打包后的代码 |
| 2 | eval | no | 生成后的代码 |
| 3 | cheap-eval-source-map | no | 转换过的代码（仅限行） |
| 4 | cheap-module-eval-source-map | no | 原始源代码（仅限行） |
| 5 | eval-source-map | no | 原始源代码 |
| 6 | cheap-source-map | no | 转换过的代码（仅限行） |
| 7 | cheap-module-source-map | no | 原始源代码（仅限行） |
| 8 | inline-cheap-source-map | no | 转换过的代码（仅限行） |
| 9 | inline-cheap-module-source-map | no | 原始源代码（仅限行） |
| 10 | source-map | no | 原始源代码 |
| 11 | inline-source-map | no | 原始源代码 |
| 12 | hidden-source-map | no | 原始源代码 |
| 13 | nosources-source-map | no | 无源代码内容 |
开发工具
webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：
- webpack's Watch Mode
- webpack-dev-server
- webpack-dev-middleware
