webpack快速上手使用

webpack 是一个用于现代 JavaScript 应用程序的静态模块化打包构建工具

Webpack的运行需要依赖Node.js，因此需要先安装Node.js。
node.js下载地址

    查看node.js是否安装成功 

  node - v     // 例如 ：v16.13.1

一、webpack快速使用

1.1 初始化package.json

    npm init -y

1.2 安装webpack相关依赖

   npm i webpack webpack-cli -D

1.3 写一点点测试代码

src目录下 创建 main.js,tools.js

public目录下 index.html 引入dist/main.js

tools.js

 // 随意写的两个方法
 module.exports = {
    add:function(a,b) {
        return a+b
    },
    jian:function(a,b) {
        return a-b
    }
 }

main.js

   // 引入 tools文件
    const tools = require('./tools')

   // 打印
    console.log('tools',tools.add(4,6));

1.4 在package.json中添加打包脚本

 {
      ....
      "scripts": {
           "build":"webpack"
       },
        ... 
 }

1.5 编写webpack配置文件

编写webpack配置文件，让webpack实现灵活环境定制，如下：

//引入相关依赖
const path=require('path')
//创建一个webpak配置对象
const config = {
    // 设置模式
    mode:'development',
    //配置入口
    entry:'./src/main.js',
    //配置出口
    output: {
       //打包路径
        path:path.resolve(__dirname,'dist'),  // dist 打包后的文件名
       //打包文件名 
        filename: 'js/bundle.js',
      //清理无用文件
        clean:tru
    }
}

//抛出
 module.exports = config

1.6 安装webpack服务器

1. 安装webpack-dev-server： npm i webpack-dev-server -D
2. 配置webpack.config.js

{
  ....
      //配置webpack服务器
      devServer: {
          port: 9999, // '9999'自定义
          //静态目录位置
          static: {
              directory:'dist'
          }
      }
  ....
} 

      3.配置package.json运行脚本

{
   ...
  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },
   ...
}

最后：使用命令打包

 npm run build