五个核心概念

entry

指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

output

指示webpack打包后资源bundles输出到哪里去，以及如何命名

loader

让webpack能够处理那些非js文件(webpack自身只能理解JavaScript)。
类似翻译官，将（css->js, img->js）

plugins

插件可以用于执行范围更广的任务，插件的范围包括从打包优化到压缩，一直到重新定义环境中的变量等。

Mode

mode分为development和production两种模式

选项 描述 特点
development process.env.NODE_ENV：development
启动NamedChunksPlugin和NamedModulesPlugin		 能让代码本地调试运行的环境
production process.env.NODE_ENV：production 能让代码优化上线运行的环境

要点：
1、webpack能处理js、json资源；不能处理css/img等资源
2、webpack能将ES6模块化编译成浏览器能识别的模块化
3、生产环境比开发环境多一个压缩js代码

打包样式资源（Loader）

Loader配置用module

  1. module: {
  2.   rules: [
  3.     {
  4.       test: /\.css/,
  5.       use: [
  6.         // 创建style标签，将js中的样式资源插入到head标签中
  7.         'style-loader',
  8.         // 将css文件变成commonjs模块加载js中，里面内容时样式字符串
  9.         'css-loader',
  10.       ]    
  11.     }
  12.   ]
  13. }

loader工作原理就是通过test来匹配相应的资源文件，然后通过use来将资源转换成webpack能理解的js，解析顺序默认是从右往左，从下往上。
Loader使用流程：1、下载 2、使用（配置Loader）

处理html资源（plugins）

  1. const HtmlWebpackPlugin = require('html-webpack-plugin')
  2. module.exports = {
  3.   plugins: [
  4.     // 功能：创建一个空的html,自动引入打包输出的所有资源（js/css）
  5.     new HtmlWebpackPlugin({
  6.       // 以src下的index.html文件为模板（复制它），并自动引入打包输出的所有资源
  7.       template: './src/index.html'
  8.     })
  9.   ]
  10. }

处理图片资源

  1. module: {
  2.   rules: [
  3.     // url-loader不能处理html中通过img标签引入的图片资源
  4.     {
  5.       test: /\.(jpg|png|gif)$/,
  6.       // 需要下载url-loader和file-loader
  7.       loader: 'url-loader',
  8.       options: {
  9.         // 图片小于8kb，就会被base64处理
  10.         // 优点: 减少请求数量（减轻服务器压力）
  11.         // 缺点: 图片体积会更大（文件请求速度更慢）
  12.         limit: 8 * 1024,
  13.         // url-loader默认支持es模块解析，而html-Loader引入图片时是commonjs
  14.         // 解决：关闭es模块化，使用commonjs解析
  15.         esModule: false,
  16.         name: '[hash:10].[ext]'
  17.       }      
  18.     },
  19.     // 要处理html里的图片资源，还需要html-loader
  20.     {
  21.       test: /\.html$/,
  22.       // 处理html中的img图片（负责引入img,从而能被url-loader进行处理）
  23.       loader: 'html-loader',
  24.     }
  25.   ]
  26. }

64一般用于转换一些比较小的（8-12kb）图片，将图片转成一长串字符串（大小会比原图片大一点）

打包其他资源（字体、图标等等）

使用file-loader+exclude（排除掉其他资源）即可

devServer

devServer: {
  // 开发服务器devServer:用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）
  contentBase: resolve(__dirname, 'build'),
  // 启动压缩
  compress: true,
  post: 8080,
}

devServer特点：只会在内存中编译打包，不会有任何输出。这就是为什么dev环境看不到输出的dist文件夹，实际上还是进行打包操作的。

提取css成单独文件

使用mini-css-extract-plugin插件
这个插件还自带一个loader: MiniCssExtractPlugin.loader,需要替换掉style-loader,style-loader是解析创建style标签，将css-loader解析后的css放到style标签里，然后插入到html的head中。

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader'
  ]
}

下面是plugins的配置

new MiniCssExtractPlugin({
  // 指定打包后文件名
  filename: 'css/built.css'
})

css兼容性处理

css兼容性处理：postcss —> postcss-loader 和 postcss-preset-env

根据浏览器版本的不同，给一些css加上前缀

js兼容性处理

处理es6及以上的语法低版本浏览器不支持的，使用babel-loader

// js兼容性处理：
// 1.基本的兼容性处理 --> @babel/preset-env
//   问题：只能转换基本语法，如promise不能转换
// 2.全部js兼容性处理 --> @babel/polyfill
//     问题：将所有兼容性代码全部引入，体积太大
// 3.按需加载兼容性处理 --> corejs
{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      // 预设：只是babel做怎样的兼容性处理
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'usage',
            corejs: {
              version: 3
            },
            // 需要兼容的浏览器
            targets: {
              chrome: '60',
              firefox: '60',
              ie: '9',
              edge: '17',
            }
          }
        ]
      ]
    }
}

压缩css

使用optimize-css-assets-webpack-plugin

压缩js和html

生产环境下会自动压缩js代码，压缩html则可以通过给之前配置的html-webpack-plugin加配置项实现

new HtmlWebpackPlugin({
  minify: {
    // 移除空格
    collapseWhitespace: true,
    // 移除注释
    removeComments: true,
  }
})