想学webpack，篇就够了

模块化打包工具

webpack是前端模块化打包工具的一种，那为什么需要模块打包工具？主要是以下几个原因：

• ES Module存在环境兼容问题。虽然大部分浏览器兼容ES Module规范，但是还有一些浏览器器不兼容，可能一些新的特性浏览器并不会兼容。
• 模块文件过多，网络请求频繁
• 所有资源也应该进行模块化

基于以上这些问题，那么需要一个工具既能让开发者在开发环境享受模块化带来的优势，又不必担心模块化对生产环境的影响。那么这个工具最起码能够实现以下几个目的：
将ES Module各种特性转化为浏览器都能兼容的代码

将各个散落的模块代码打包到一个或多个文件中，减少网络请求：

将不同资源进行模块化，并且打包

webpack 核心特性

• 模块加载器（loader）：用于转化加载各种类型模块
• 代码拆分（code Splitting）: 将资源按照我们的需求去打包，同时能够增量式加载模块，将启动时用到的模块打包到一起，其他模块用到时再去加载。
• 资源模块 （Asset module）:webpack在打包时，将css,图片这类资源模块，以合适的文件去处理

基本安装

创建一个目录，初始化npm,本地安装webpack,webpack-cli:

// 初始化npm
npm init -y

// 安装 webpack webpack-cli
npm install webpack webpack-cli --save-dev

webpack 配置

运行webpack命令式时，webpack会默认将src/index.js作为打包入口，然后在dist/main.js输出结果，并在开发生产环境开启代码压缩和优化。

但是，webpack在打包时会根据需求的不同扩展配置，此时就需要在项目根目录下创建webpack.config.js文件，然后webpack会自动使用此配置（配置文档）。

const { Module } = require("webpack");

const path = require("path")
module.exports = {
    // 打包入口
    entry: "./src/index.js",
    // 打包输出
    output: {
        // 路径 --绝对路径
        path: path.resolve(__dirname, 'dist'),
        // 输出文件名
        filename: 'bundle.js'
    }
}

模式（mode）

通过设置mode选型，来告知webpack内部使用什么样的模式来优化。

mode有三种模式：none | development | production，设置:

module.exports = {
    mode: 'development'
}