简单使用webpack

新建一个文件夹webpack-learn

进入文件夹，初始化目录npm init -y
生成一个package.json文件

在本地开发环境中安装webpack和webpack-cli
npm install -D webpack webpack-cli

在根目录下新建文件webpack.config.js
写入：

const path = require('path');

module.exports = {
    mode: 'production',                     // 打包成生产环境的代码（会自动压缩代码）
    entry: "./src/index.js",               // 指定入口文件
    output: {
        path: path.join(__dirname, 'dist'),       // 出口文件的目录
        filename: 'bundle.js'                     // 出口文件的文件名
    }
}

在index.js中写入测试代码：

var a = 10;
var b = 20;
console.log(a + b);

在终端执行命令：
./node_modules/.bin/webpack
后出现dist目录，目录下有bundle.js，内容为：

console.log(30);

可在index.js中引入bundle.js查看结果

一点小总结，如有错误可在评论区或私信指出