webpack学习总结

webpack自身只理解JavaScript，分为开发模式和生产模式
开发模式：打包后的代码可读性强，文件大。
生产模式：打包后的代码可读性差，文件小。

优化

css plugins 替换style-loader，可以解决网速慢产生的闪屏现象
sourceMap：源代码映射，打包后查看报错源码
生产模式 devtool: “source-map” // 打包速度慢，包含行和列
开发模式 devtool: “cheap-module-source-map” // 打包速度快，只包含行映射，没有列映射
HMR：热模块替换，devServer: { hot: true } /* 热模块替换，提高打包速度，类似diff算法的功能 /,
Exclude：排除不需要编译的文件夹或文件
Cache：缓存，每次打包都要经过babel的编译和eslint的检查
cacheDirectory: true / 开启babel缓存 /,
cacheCompression: false / 关闭缓存的压缩 */,
Thread：多进程，同时干一件事情，每个 worker 都是一个独立的 node.js 进程，其开销大约为 600ms 左右，请仅在耗时的操作中使用此 loader！
Tree Shaking：通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export，默认开启
ImageMinimizerWebpackPlugin：对本地图片进行压缩（无损或有损）
Code splitting：分割代码，多个入口文件
SplitChunksPlugin：插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。
core-js：es6语法兼容性问题
PWA：渐进式网络应用程序，其中最重要的是，在**离线(offline)**时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的 web 技术来实现的。

入口文件

entry来配置，可以是一个，也可以是多个，默认的是./src

出口文件

output来配置，文件被编译到哪个文件夹

loader

是用于转换某些类型的模块
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

loader 特性

loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何可能的操作。
loader 接收查询参数。用于对 loader 传递配置。
loader 也能够使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。

插件(plugins)

插件是一个构造函数，需要先引入，然后new调用
插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

模式

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
  // 单入口文件  string|Array<string>
  entry: './path/to/my/entry/file.js'，
   //   分离 应用程序(app) 和 第三方库(vendor) 入口
   entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
  // 多页面应用程序
   entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
    //出口文件
    // 单入口文件的出口文件
   output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
  // 多入口文件的出口文件
   output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
  //loader
   module: {
    rules: [
    //test 正则匹配需要转换的文件  use  使用对应的loader转换将文件转为js
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
    //插件
    plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
      // 模式
    mode: 'production'
};```