webpack

• 官方文档：
  • 概念 - https://webpack.docschina.org/concepts/
  • 指南 - https://webpack.docschina.org/guides/
  • 配置 - https://webpack.docschina.org/configuration#options
  • api - https://webpack.docschina.org/api/module-methods
• （第三方）视频：https://www.bilibili.com/video/BV1e7411j7T5

webpack 能动态打包静态"模块"(chunk) => 输出"束"(bundle)

解释：
在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。JavaScript 模块也遵循同样方式，但是，像 webpack 这样的工具，将动态打包所有依赖（创建所谓的 依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，可以避免打包未使用的模块。
link - webpack 资源管理

五个核心概念：

1. entry：指示webpack处理入口
2. output：指示webpack如何输出（路径、命名）
3. loader：指示webpack处理非javascript文件（否则webpack只能处理javascript文件）
4. plugins：指示webpack处理更广的任务（代码版本适配、丑化、压缩、重新定义环境变量等）
5. mode：指示webpack使用相应的模式(dev/pro/…)，配置

开始

文档：https://webpack.docschina.org/guides/getting-started/

# 开发(路径为默认路径，可省略)
webpack ./src/index.js -o ./dist/main.js --mode=development
# 生产(=开发+代码压缩)
webpack ./src/index.js -o ./dist/main.js --mode=production

# 2022年8月6日
报错：“CLI for webpack must be installed.\n  webpack-cli (https://github.com/webpack/webpack-cli)”
解决：命令'webpack'更换为'webpack-cli' 
or 'npx webpack' 
or '使用 npm scripts'(这样我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages)
1
2
3
4
5
6
7
8
9
10

e.g.

./src/index.js

import _ from 'lodash';

function component() {
  const element = document.createElement('div');

  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
1
2
3
4
5
6
7
8
9
10
11
12

./dist/main.js("./src/index.js"部分+格式化)

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);


function component() {
  const element = document.createElement('div');

  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = lodash__WEBPACK_IMPORTED_MODULE_0___default().join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

//# sourceURL=webpack://webpack-test/./src/index.js?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

问题：无法对css/img打包。
下面介绍css/img打包

管理资源(css/img/font/…)

文档：https://webpack.docschina.org/guides/asset-management/

webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。

加载css

文档：https://webpack.docschina.org/guides/asset-management/#loading-css

npm install --save-dev style-loader css-loader
1

webpack.config.js

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
  // loader的配置
  module: {
    rules: [
      {
        // 匹配的文件
        test: /\.css$/i,
        // 执行顺序：顺序执行
        use: [
        	// 创建style标签，将js中的样式资源插入进行，添加到head中生效
        	'style-loader', 
        	// 将css文件变成commonjs模块加载js中
        	'css-loader'
       	],
      },
    ],
  },
 };
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

加载image

文档：
https://webpack.docschina.org/guides/asset-management/#loading-images
https://webpack.docschina.org/guides/asset-modules/#resource-assets

生成已引入资源的html文件

文档：

1. 基本使用 - https://webpack.docschina.org/plugins/html-webpack-plugin/#root
2. 配置选项 - https://github.com/jantimon/html-webpack-plugin#options

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [],
  },
  plugins: [
  	new HtmlWebpackPlugin({
  		template: './src/index.html'
  	})
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19