webpack快速使用

一、webpack是什么

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

Webpack的运行需要依赖Node.js，因此需要先安装Node.js。
[下载地址](Node.js 中文网 (nodejs.cn)

• 查看是否安装成功

// 查看版本
node - v     // 例如 ：v16.13.1

二、webpack快速使用

2.1 初始化package.json

   npm init -y

2.2 安装webpack相关依赖

  npm i webpack webpack-cli -D

2.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));

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

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

2.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

2.5 安装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  

© 著作权归作者所有,转载或内容合作请联系作者