Webpack是一个前端的项目构建工具，它是基于node.js开发出来的一个前端工具
官网：https://www.webpackjs.com/

安装

# 全局安装
npm install -g webpack webpack-cli

# 检查版本
webpack -v

配置

webpack目录下创建配置文件webpack.config.js

const path = require('path');
module.exports = {
    // 配置入口文件按
    entry: './src/main.js',
    output: {
        //输出路径，__dirname：当前文件所在路径
        path: path.resolve(__dirname, '.dist'),
        // 合并后的文件名
        filename: "bundle.js",
    }
}

注意使用的文件夹，文件配置的是./src/main.js，所以需要在/src的外面使用打包命令，然后会生成.dist文件夹，合并之后的文件名是bundle.js

打包命令：webpack

后面可以跟两个参数：'development' or 'production'

# 打包为开发版
webpack --model=development

# 打包为生产版
webpack --mode=production

测试

# 创建 webpackdemo
mkdir webpackdemo

# 进入webpackdemo
cd webpackdemo

# 初始化项目
npm init -y

创建webpackdemo文件夹之后使用npm init -y初始化后会生成package.json

exports.info = (str) => {
    document.write(str);
}

const comm  = require("./common.js");
const util  = require("./utils.js");

comm.info("hello webpack" + util.add(1, 2));

exports.add = (a, b) =>  a + b;

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

WebPack简单使用

安装

配置

打包命令：webpack

测试