前端analysis | 3w & 1h

《webpack》- 核心概念整理

2020-07-11

webpack

静态模块打包器，本身只能处理js,json。通过loader扩展，处理其他类型的文件

webpack核心概念

Entry

an entry point indicates which module webpack should use to begin building out its internal dependency graph

1
2
3
4
# 默认 ./src/index.js
module.exports = {
  entry: './path/to/my/entry/file.js'
};

Output

The output property tells webpack where to emit the bundles it creates and how to name these files.

单一配置

1
2
3
4
5
6
7
8
9
10
const path = require('path');

module.exports = {
  mode:'development', # development, production or none 之一
  entry: './path/to/my/entry/file.js',
  output: { # 默认./dist/main.js
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

多输出配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# exports为数组，而非output是数组
module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  name: 'amd',
  entry: './app.js',
  mode: 'production',
}, {
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  name: 'commonjs', # 通过--config-name 进行单一配置项应用输出
  entry: './app.js',
  mode: 'production',
}];

Module

js module

js 功能模块的逻辑划分

webpack module

js 或者 css依赖关系的一种表述

  • js
    • node import\export
    • commonjs require\module.exports
    • ADM define\require
  • css
  • @import
  • url or src

Loader

webpack只能处理js，json，其他的文件类型处理，需要loader进行转换，转换为js模块
通过test进行正则匹配文件，use指定loader

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path');

 module.exports = {
 output: {
     filename: 'my-first-webpack.bundle.js'
 },
 module: {
     rules: [
     { test: /\.txt$/, use: 'raw-loader' }
     ]
 }
 };

Plugins

完成loader不能完成的事情

1
2
3
4
5
6
7
8
9
10
11
12
13
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Mode

指定构建环境，用于构建不同的版本

1
2
3
4
# 默认产线
module.exports = {
  mode: 'production'
};

Browser Compatibility

webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). webpack needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

构建

指定配置文件

1
2
3
"scripts": {
  "build": "webpack --config prod.config.js"
}

Targets

指定最终代码，运行环境

1
2
3
module.exports = {
  target: 'node'
};

多运行环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const path = require('path');
const serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

const clientConfig = {
  target: 'web', // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];

resolve

指定默认依赖如何查找

externals直接引用，非打包

1
2
3
4
5
6
module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

添加配置文件

React ui添加webpack配置配置

webpack配置

webpack-cli添加配置
1
2
npm install @webpack-cli/init
npx webpack-cli init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 npx webpack-cli init

ℹ INFO For more information and a detailed description of each question, have a look at https://github.com/webpack/webpack-cli/blob/master/INIT.md
ℹ INFO Alternatively, run `webpack(-cli) --help` for usage info.

? Will your application have multiple bundles? No
? Which module will be the first to enter the application? [default: ./src/index]
? Which folder will your generated bundles be in? [default: dist]:
? Will you be using ES2015? Yes
? Will you use one of the below CSS solutions? No

+ babel-plugin-syntax-dynamic-import@6.18.0
+ uglifyjs-webpack-plugin@2.0.1
+ webpack-cli@3.2.3
+ @babel/core@7.2.2
+ babel-loader@8.0.4
+ @babel/preset-env@7.1.0
+ webpack@4.29.3
added 124 packages from 39 contributors, updated 4 packages and audited 25221 packages in 7.463s
found 0 vulnerabilities


Congratulations! Your new webpack configuration file has been created!

用ts编写webpack.config

安装依赖
1
2
3
npm install --save-dev typescript ts-node @types/node @types/webpack
 # and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server
ts配置webpack
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 # 使用import ,非require
import * as path from 'path';
import * as webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};
# 使用export ,非module.exports
export default config;
ts配置tsconfig.json校验
  • method one: compilerOptions

    有关tsconfig.json的介绍请参考

    1
    2
    3
    4
    compilerOptions: { 
         "module": "commonjs",
         "target": "es5",
    }
  • method two: 
    1
    npm install --save-dev tsconfig-paths
  • 添加配置tsconfig-for-webpack-config.json,覆盖tsconfig.json
    1
    2
    3
    4
    5
    6
    7
    8
     # tsconfig-for-webpack-config.json
     {
      "compilerOptions": {
          "module": "commonjs",
          "target": "es5",
          "esModuleInterop": true
      }
    }
  • 定义构建脚本
    1
    2
    3
    4
    5
    {
     "scripts": {
         "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
     }
     }
本文作者：前端analysis
联系邮箱：cheonghu@126.com
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
Tags: webpack core concepts
← 《 Angular8 》 - angular8深入了解指令 《devTool》- mac vscode 快捷键看这篇就够了 →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏