Webpack 快速体验

2024-10-21
webpack
188

webpack 的核心能力是静态代码编译,与框架无关,因此,我们可以使用一个最简单的项目体验 webpack 能力。

  1. 创建项目,安装 webpack 依赖
mkdir webpack-demo
cd webpack-demo
npm init
npm i webpack webpack-cli -D

执行 npm list webpack 可以查看webpack 版本,这里我们的版本是

webpack-cli@5.1.4

webpack@5.95.0

  1. 新建必要文件

新建 source.js

 console.log('hello world')

新建 webpack 配置 webpack.config.js

module.exports = {
  entry: './source.js',
};
  1. 执行
npx webpack

之后,控制台输出

asset main.js 0 bytes [emitted] [minimized] (name: main)
./source.js 48 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.95.0 compiled with 1 warning in 91 ms
  1. 输出结果

webpack 会在当前目录生成 dist 目录,输出 main.js

 console.log('hello world')

通过webpack,内容已经经过转换