在打包文件时，某些场景可能需要在文件顶部添加描述信息，例如：版本、版权、作者、发布时间以及其它相关说明等，通常在打包 JS 库时比较常见，官方提供了 webpack.BannerPlugin 实现此功能。

类似上面的场景，或者其它更复杂的如：A 引用 B，B 引用 C，C 又引用了 A，在不经意间可能会遇到一些诡异问题，如：明明代码没问题，却读不到导入的模块......

webpack 搭建文档：[链接] 安装依赖 {代码...} eslint-friendly-formatter，指定终端中输出eslint提示信息的格式。 增加配置 {代码...} package.json文件同级增加文件.eslintrc.js {代码...} 配置项含义： root 限定配置文件的使用范围 parser 指定eslint的解析器 parserOptions 设置解析器选项 extends 指定eslint规范 ...

某些时候，应用中依赖了某些模块，但希望将这些模块独立通过CDN引入，以减小包的体积，所以不必将这些模块打包，例如：jQuery。 特定场景下，这个功能会有用武之地！webpack提供了 externals 可以来配置，打包时将此模块排除，且不用修改其它任何代码。

script-loader 把我们指定的模块 JS 文件转成纯字符串，exports-loader 将需要的 js 对象 module.exports 导出，以支持 import 或 require 导入。

通常使用模块，我们需要先import、require该模块，例如：react，我们需要在每个react组件中都import一次，通过webpack.ProvidePlugin，我们可以省去这种重复劳动，不必在组件中单独导入。

process.env是nodejs运行环境下的全局变量，在我们的应用代码（如src目录下的代码）中是无法直接读取到的，如果想要在应用代码中读取到process.env，或者如package.json中的数据，或其它nodejs环境中才有的变量，可以通过webpack.DefinePlugin将它们注入到应用中，将被声明为全局变量，直接读取即可。

给模块或目录配置别名，即可在导入时避免书写冗长的引入路径，如：import $ from 'utils/zepto.min'；某个自己写的通用插件，配置别名为xx后，即可：import xx from 'xx'。

常用配置 {代码...} 根据目录结构的不同，contentBase、openPage 参数要配置合适的值，否则运行时应该不会立刻访问到你的首页; 同时要注意你的 publicPath，静态资源打包后生成的路径是一个需要思考的点，这与你的目录结构有关。

css 或 js 中引入的图片、字体、多媒体等静态资源，统一使用 url-loader 处理。 配置了 url-loader 以后，webpack 编译时可以自动将小文件转成 base64 编码，减少网络请求。如果不需要将小文件转成 base64 ，也可以用 file-loader 替换 url-loader。 安装依赖包 url-loader 内部会自动调用 file-loader，所以仍然需要安...

需要安装的依赖包 {代码...} 过去版本的autoprefixer、postcss-cssnext已内置在postcss-preset-env内。

正常如果有多个入口，需要在 entry 中，以对象形式将所有入口都配置一遍，html 模版目录也需要 new 很多个 HtmlWebpackPlugin 来配置对应的页面模版，是否可以自动扫描? 无论多少个入口，只管新建，而不用管理入口配置？可以的！

装饰器语法支持webpack 搭建文档：[链接]安装依赖 {代码...} .babelrc 增加配置 {代码...} import - 动态导入支持安装依赖 {代码...} .babelrc 文件增加配置 {代码...}

babel 官方认为，把不稳定的 stage0-3 作为一种预设是不太合理的，@babel/preset-env、@babel/polyfill等只支持到stage-4级别，因此 babel 新版本废弃了 stage 预设，转而让用户自己选择使用哪个 proposal 特性的插件，这将带来更多的明确性（用户无须理解 stage，自己选的插件，自己便能明确的知道代码中可以使用哪个特...

前文介绍了 core-js@2 的配置，而 core-js@3 的更新，带来了新的变化，@babel/polyfill 无法提供 core-js@2 向 core-js@3 过渡，所以现在有新的方案去替代 @babel/polyfill。需要 babel-loader 版本升级到 8.0.0 以上，@babel/core 版本升级到 7.4.0 及以上。

首先要确认，@babel/polyfill 和 @babel/plugin-transform-runtime 各自都可以完成 ES 新 API 的转译，ES 新语法是由 @babel/preset-env 完成转译，所以，@babel/polyfill、@babel/plugin-transform-runtime 都需各自搭配 @babel/preset-env 一起使用。翻阅、参考了大量资料，并在实际生产开发中验证，二者的配置、原理...

@babel/preset-env + @babel/plugin-transform-runtime 搭配使用，可以完成基本语法转译 + ES 新语法的按需加载，这是配置 Babel 转码的第二种方式。

@babel/preset-env + @babel/polyfill 可以完全实现 ES 基础语法的转译 + 新 API 的转译，这是配置 Babel 转码的第一种方式。

基础依赖包 {代码...} 从 babel7 开始，所有的官方插件和主要模块，都放在了 @babel 的命名空间下。从而可以避免在 npm 仓库中 babel 相关名称被抢注的问题。