webpack.config.js

发表于 | 分类于

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        print: './src/print.js'
    },
    devtool: 'inline-source-map',  // 追踪错误 开发环境 eval-cheap-module-source-map  最佳选择
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist'), // __dirname 当前文件所在的目录
        clean: true //枸构建前清理文件
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development'
        }),
        new webpack.ProvidePlugin({
            _: 'lodash',  // 遇到_ 时，引入lodash package
            join: ['lodash', 'join'], // join  模块单个导出
        })
    ],
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: "all" // 去除重复的引入模块
        }
    }
}

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch", // 观察模式
    "start": "webpack server --open", // webpack-dev-server 实时重新加载
    "serve": "node server.js",  //  webpack-dev-middleware 中间件
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.3",
    "csv-loader": "^3.0.5",
    "html-webpack-plugin": "^5.5.0",
    "json5": "^2.2.3",
    "style-loader": "^3.3.1",
    "toml": "^3.0.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "xml-loader": "^1.2.1",
    "yamljs": "^0.3.0"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

模块标记为ESM

在package.json目录下

  • type:‘module’ 使用ECMAScript模块
  • type:‘commonjs’ 使用CommonJS模块

预获取

  • prefetch
    • import(/* webpackPrefetch: true */)
    • 只要父 chunk 完成加载，webpack 就会添加 prefetch hint(预取提示)
    • 在父chunk加载结束后，再开始加载
    • 闲置下载
    • 未来时刻

预加载

  • preload module
    • 在父chunk加载的时候，并行加载
    • 立即下载
    • 立即请求、当下时刻

Webpack构建流程

  • 初始化：启动构建，读取并合并配置参数，加载plugin，实例化Complier
  • 编译：从Entry出发，针对每个Module串行调用对应的Loader去翻译文件的内容，再找到该Module依赖的Module，递归编译
  • 输出：将编译后的Modue组成成Chunk,将Chunk转换成文件，输出到文件系统

文件指纹

  • Hash：整个构建项目的hash，文件有修改，整个项目的hash值就会更改
  • ChunkHash：Webpack打包的Chunk，不同的entry会生出不同的chunkhash
  • contenthash：依据文件内容，文件内容不变，contenthash不变

require.context

  • 实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）
1
2
// 遍历获取 api 目录下所有的 js 文件（包括子目录）
require.context('@/api' , true, /(.js$)/);