webpack_step1_概念

webpack版本

v_5.54

核心概念

入口(entry)	输出	loader	插件	模式	浏览器兼容性
webpack 应该使用哪个模块作为构建依赖图的开始	output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件	webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件	loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务,如打包优化，注入文件，插件的目的是为了解决 loader 无法做到的其他事	通过选择 development, production 或 none 之中的一个,设置对应环境下的优化,默认值为 production	webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本),如果想兼容低版本浏览器

入口

• 单个入口

module.exports = {
  entry: './path/to/my/entry/file.js'
};

• 多入口

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

输出

• filename

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

• name 占位符

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

• hash 占位符(用于解决 http 缓存问题)

module.exports = {
  //...
  output: {
    path: '/home/proj/cdn/assets/[hash]', // 文件输出位置
    publicPath: 'http://cdn.example.com/assets/[hash]/' // 静态资源位置（CDN 地址）
  }
};

模式

webpack 会在不同模式下启用不同的优化策略

module.exports = {
  mode: 'production'
};

• production
  设置 process.env.NODE_ENV 为 production,关闭 source,开启代码压缩等
• development
  热更新、process.env.NODE_ENV 为 development等
• none
  不开启任何优化

loader

loader 支持链式传递。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

插件

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装

module.exports = {
  ......
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

为什么选择 webpack

• 支持模块化编程，可以解决作用域问题
• 支持 treeShaking，不用再因为使用一个小的函数而去引入整个 JS 库，显著减少了项目的体积

模块解析

webpack 支持 3 中模块的解析

• 绝对路径

import '/home/me/file';

import 'C:\\Users\\me\\file';

• 相对路径

import '../src/file1';
import './file2';

• 模块路径

import 'module';
import 'module/lib/file';

可以以替换初始模块路径，此替换路径通过使用 resolve.alias 配置选项来创建一个别名。

依赖图

webpack 从命令行或配置文件中定义的一个模块列表开始，处理你的应用程序。 从这些 入口起点 开始，webpack 递归地构建一个依赖图，这个依赖图包含着应用程序所需的每个模块，然后将所有这些模块打包为少量的 bundle - 通常只有一个 - 可由浏览器加载。

manifest

在经由 webpack 打包形成的 web 项目中，有 3 中主要的代码类型
1. 团队业务源码
2. 第三方库打包形成的 vendor
3. webpack的 runtime和 manifest

• runtime
  在浏览器运行过程中，加载模块的逻辑。包括同步加载。异步加载
• manifest
  runtime加载模块时候的依据。manifest 内部是一个个模块与模块的映射关系

部署目标(target)

默认是 web,使用 node，webpack 会编译为用于Node.js 环境。在加载代码块的时候使用 require 而不是 fs.readFile

module.exports = {
  target: 'node'
};

模块热替换

模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。webpack-dev-server 支持 hot 模式，在试图重新加载整个页面之前，hot 模式会尝试使用 HMR 来更新。