1 初始化仓库

  1. cnpm init -y

2 安装依赖

cnpm i webpack -S
cnpm i webpack-cli —S

3 创建webpack.config.js

const webpack = require("webpack");
const path = require("path");
const config =  {
    entry:path.resolve(__dirname,'src/main.js'),  //入口文件
    output:{  //出口文件
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'development'  //模式
}
module.exports = config;

注意：这里要确保入口文件存在，出口文件的目录文件夹存在。

4 配置package.json

  "scripts": {
    "build": "webpack  --config webpack.config.js"
  },

5 启动打包

cnpm run build

6 使用

在index.html里导入出口文件就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/bundle.js"></script>
</head>
<body>

</body>
</html>