此时的配置文件

老师的babel-core@6.18.0 和 babel-loader@6.2.7 版本号

webpack 使用 babel 之前 npm 安装 babel， babel 的使用

• npm install --save-dev babel-loader babel-core

• webpack 配置 babel-loader

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

• webpack 配置 evn presets（这点不是很懂），指定 presets ，告诉 babel-loader 怎么处理 js；还可以通过根目录下创建 .babelrc 配置文件，设置 { "presets": ["env"] }，官方；还可以在 package.json 文件中添加 "babel": { "presets": ["latest"] } ;

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader",
      query: {
          'presets': ['latest']
      }
    }
  ]
}

• 安装 evn presets 插件：npm install --save-dev babel-preset-latest （官网没有 lastest 版本，而是 推荐使用 npm install babel-preset-env --save-dev，babel-preset-env replaces es2015, es2016, es2017 and latest）https://babeljs.io/docs/plugins/

http://babeljs.io/docs/setup/#installation

https://doc.webpack-china.org/concepts/loaders#loader-%E7%89%B9%E6%80%A7

loader 的特性和使用方式

修改配置文件中 htmlWebpackPlugin 的 inject: 'body' -> false，因为在 html 模版中通过 ejs 自定义打包模块注入位置

已经通过 excludeChunks，指定排除了不需要的打包模块

main 打包模块已经自定义在 head 中，所以在 body 中遍历自身 chunks 的时候需要排除 main 模块

内联插入打包后的 main 模块代码

完整的输出 main 模块打包后的文件内容的代码

<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>

设置了 output.publicPath 后，htmlWebpackPlugin.files.chunks.[chunkname].entry 输出的是带有 publicPath 的绝对路径，但 compilation.assets[file-path].source() 中的 file-path 是不带有 publicPath 的，因此需要使用 substr(htmlWebpackPlugin.files.publicPath.length) 去裁剪字符串... 输出类似 "js/a-c7dd2e0674d065ba1d22.js" 的字符串

webpack区别其他打包工具：1.Code Splitting代码分割 2.模块热更新

模块化：CMD / AMD / ES6

常见组合：react + webpack + es6

将打包的 js 模块以内联 inline 方式引入 htmlWebpackPlugin 输出的 html 文件

html-webpack-plugin/examples/inline/template.jade

doctype html
html
  head
    meta(http-equiv="Content-type" content="text/html; charset=utf-8")
    title #{htmlWebpackPlugin.options.title}
  body
    each cssFile in htmlWebpackPlugin.files.css
      style !{compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
    each jsFile in htmlWebpackPlugin.files.js
      script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}

compilation 是 webpack 自身暴露的对象变量

compilation.assets 是 webpack 打包文件输出的对象， 如下结构

{

    "js/a-c7dd2e0674d065ba1d22.js":

    {

        "_source": {...},

        "_cachedSize": 1442,

        "_cachedMaps": {}

    },

    "js/b-b65b8b01068059dd7047.js": {...}

    "js/c-6ce24a41e898b7f598cb.js": {...},

    "js/main-13e6e64b8f9469134be8.js": {...}

}

通过 compilation.assets[file-path].source() 来输出打包文件内容

excludeChunks: ['b', 'c']

Allows you to skip some chunks (e.g don't add the unit-test chunk)

指定不要引入的打包文件

htmlWebpackPlugin

chunks：['main', 'a']

Allows you to add only some chunks (e.g only the unit-test chunk)

指定添加哪些打包模块，数组类型，数组值为被打包文件的文件名字符串

此时需要注意两点

1. inject 需要设为 true | 'body' | 'head'，否则指定的 chunks 无法注射

2. 将自定义的 html 模版中，使用 ejs 自定义引入的打包文件删去，避免引入混乱

疑问：这样统一注射打包文件，是不是又无法像 ejs 一样自定义注射的位置了？

之前配置生成的 html 页面：三个页面都引入 main.js，但在末尾引入自己的页面 js 文件

因为共用的 html 模版在末尾的配置是

<script src='<%= htmlWebpackPlugin.files.chunks.a.entry %>'></script>

默认都输出了 a 的打包文件