webpack5 学习 1--基础

记录 webpck 学习

准备工作

1. 安装 node 与 npm (这个步骤略过）

2. 下载 webpack npm i webpack webpack-cli --save-dev

webpack 基础

这个是官网的webpack 工作流程示意图

根据这个图，我们不难发现： webpack 是一个模块打包器， 他会根据一个或多个入口文件生成依赖树，然后通过一个个对应的模块处理器， 最终输出一个或多个需要的 bundles

webpack 配置文件的组成部分

entry: './src/index.js',   // 入口文件
output: './dist/main.js', //  输出文件
mode: 'production',   // 模式 一般值有： development | production | none  这个主要是用来区分环境的，可以根据不同环境，采取不同的配置方案
module: { // loader 配置， 主要是用不同loader处理项目中不同的模块
  rules: [
    {test: /\.txt$/, use: 'raw-loader'}
  ]
},
plugins: [ // 插件配置， 用来处理 loaders 无法处理的事情，例如热加载
  new HtmlwebpackPlugin({
    template: './src/index.html'
  })
]  

Entry

分为单入口与多入口

单入口： entry: './src/index.js' 多入口：

entry: {
  app: './src/app.js',
  main: './src/main.js'
}

Output

output 不区分单文件还是多文件， 但是如果入口有多个，可以通过占位符进行区分，保证文件名的对应与唯一

// 单文件
output: {
  filename: 'index.js',
  path: __dirname + '/dist'
}
// 多文件（单文件的时候同样可以这样写，其实更推荐这样的写法）
output: {
  filename: '[name].js',
  path: __dirname + '/dist'
}

Mode

Mode 用来指定当前的构建环境是： production（默认） | development | none 不同的 mode， webpack 的内置参数会不一样，

Loaders

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

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

常见 Loader

使用方法

module: {
  rules: [
    {
      test: '/\.txt$/, // 指定匹配规则
      use: 'raw-loader' // 指定使用的 loader
    }
  ]
}

Plugins

一般，插件用于 bundle 文件的优化，资源管理和环境变量的导入，它作用于整个构建过程

常见 Plugin

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  })
]