核心概念之Entry

Entry用来指定 webpack 的打包入口

理解依赖图的含义
依赖图入口是entry
对于非代码，比如图片，字体也会不断添加到依赖图中

单入口：entry是一个字符串

  1. module.exports = {
  2.     entry: './path/to/my/entry/file.js'
  3. }

多入口：entry是一个对象

module.exports = {
    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js'
    }
}

核心概念之Output

Output用来告诉webpack如何将编译后的文件输出到磁盘

在entry中有多个入口，在output中没有多入口的说法

多入口配置
通过占位符确保文件名称的唯一

对于单入口ouput，filename可以写死，比如

filename: 'bundle.js'

多入口的output，需要使用占位符进行区分

filename: '[name].js'

完整版

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
    }
}

核心概念之Loaders

webpack开箱即用只支持JS和JSON两种文件类型，通过Loaders去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中

Loades本身是一个函数，接受源文件作为参数，返回转换对比结果

常见的Loaders有哪些

babel-loader 转换ES6，ES7等JS新特性语法
css-loader 支持.css文件的加载和解析
less-loader 将less文件转换为css
ts-loader 将TS转换为JS
file-loader 进行图片，字体等的打包
raw-loader 将文件以字符串的形式导入
thread-loader 多进程打包JS和CSS

Loaders的用法

module.exports = {
  output: {
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {test: /\.txt$/, use: 'raw-loader'}
    ]
  }
}

test指定匹配规则，use指定使用的loader名称

核心概念之Plugins

插件用于bundle文件的优化，资源管理和环境变量注入，作用于整个构建过程
增强Loaders，Loaders中无法做到的事情，可以通过Plugins完成
比如：构建之前需要手动删除目录

常见的Plugins有哪些

CommonChunkPlugin 将chunks相同的模块代码提取成公共js
CleanWebpackPlugin 清理构建目录
ExtractTextWebpackPlugin 将CSS从.bundle文件里提取成一个独立的CSS文件
CopyWebpackPlugin 将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin 创建HTML文件去承载输出的bundle
UglifyjsWebpackPlugin 压缩JS
ZipWebpackPlugin 将打包出的资源生成一个zip包

Plugins的用法

module.exports = {
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({template:
        './src/index.html'
        })
    ]
}

将Plugin插件放在plugins数组中

webpack核心概念之Mode

Mode用来指定当前构建环境是：production、development还是none
设置mode可以使用webpack内置的函数，默认值为production
Mode是webpack4提出的新概念

生产方式区别

webpack有两种操作模式：开发(development )和(production)
在开发模式中，为了便于代码调试方便我们快速定位错误，不会压缩混淆源代码。相反，在生产模式下，webpac k进行了许多优化：

  • 使用 TerserWebpackPlugin 进行缩小以减小 bundle 的大小
  • 使用ModuleConcatenationPlugin提升作用域

Mode的内置函数功能

development 设置process.env.NODE_ENV的值为development，开启NameChunkPlugin和NameModulePlugin
production 设置process.env.NODE_ENV的值为production，开启FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，noEmitOnErrorsPlugin，OccurrenceOrderPlugin，SiderEffectsFlagPlugin和TerserPlugin
none 不开启任何优化选项

Code spliting

  • 避免出现一个很大的 bundle
  • 避免重复的依赖关系

在 webpack 中有三种激活 code splitting 的主要方法:

  • 有多个入口点
  • 使用 optimization.splitChunks 选项
  • 动态导入

第一种基于多个入口点的技术适用于较小的项目，但是从长远来看它是不可扩展的。这里我们只关注第二和第三种方式。