准备工作

  • vscode
  • node V16.13.1
  • npm V8.17.0

项目初始化

首先在想要的位置新建一个空的文件夹,这里取名为 webpack,然后进入该文件夹执行命令

// 初始化项目
npm init -y

我们会得到一个 package.json

此时项目结构如下

webpack
|- package.json;

接下来安装 webpack

// 初始化项目
npm install webpack webpack-cli --save-dev

此时项目结构如下

webpack
|- /node_modules;
|- package-lock.json
|- package.json;

我们还需要调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。 使用在 package.json 文件中

// 删除
"main": "index.js",
 
// 增加
"private": true,

创建一个 src 文件夹,里面存放 html,js

webpack
|- /node_modules;
|- /src
  |- index.html
  |- index.js
|- package-lock.json
|- package.json;
 
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>hello webpack</p>
  </body>
</html>
// index.js
console.log('hello webpack');

准备配置文件

在跟目录下创建 webpack.config.js 此时项目结构为

webpack
|- /node_modules;
|- /src
  |- index.html
  |- index.js
|- package-lock.json
|- package.json;
|- webpack.config.js

webpack.config.js的内容为

const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

调整 package.json,在 script 中

// 增加
"build": "webpack"

img

此时我们可以运行npm run build 可以看到在根目录下增加了一个 dist 文件夹 此时的项目结构

webpack
|- /dist
	|-main.js
|- /node_modules;
|- /src
  |- index.html
  |- index.js
|- package-lock.json
|- package.json;
|- webpack.config.js