前端必会打包工具--Webpack

hellsing
246 阅读3分钟

前言

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

本文根据日常工作总结而出的，并不适合所有项目，如有错误，请指正

文章涉及到依赖的版本号。

node：v16.15.0
webpack: 5.73.0
webpack-cli: 4.10.0

正文

webpack是什么？

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

  • 静态： 项目中的静态资源如css、图片等文件

  • 模块: js文件（模块化开发中，一切js文件皆为模块）

  • 打包：主要帮你压缩代码，然后还会加密、混淆代码防止被人偷窥~

Webpack基本使用流程

初始化npm : npm init -y

  • 1.安装命令： npm i webpack webpack-cli -D

    • D含义： 相当于 --save-d , 将webpack作为开发依赖。

    • 因为webpack只是一个代码压缩打包工具，只需要在开发阶段使用，而发布阶段用不上。因此一般放入开发依赖

    • 本地包 ： 不同的项目由于webpack版本不同，比如一些老版本项目可能用最新版的webpack无法打包。 因此不建议将webpack作为全局包安装。

  • 2.检测是否安装成功: npx webpack -v

    • 这个命令其实就是检查你的node_module命令下面有没有webpack文件，有的话就读取这个文件里面的版本信息

image.png

  • 3.在新建src文件夹中新建js文件(模块)
    • 分别新建一个index.js、add.js
//index.js文件代码
const aaaaaa = '掘金'
const bbbbbb = 'webpack打包工具'
console.log(aaaaaa,bbbbbb)

//导入add.js模块
const add = require('./add.js')
const res = add(10,20)
console.log(res);

//add.js文件代码
const getSum = (a,b)=>{
  return a+b
}
const fn = a=>a*2
console.log( fn(10) )

const aaaa = '我是add.js代码'
console.log(aaaa);

//导出模块（---小提示：webpack同时支持commonjs模块化规范与ES6模块化规范，所以使用ES6模块化也是可以识别的）
module.exports = getSum

  • webpack默认的打包文件入口目录是 ./src/index.js , 因此必须要有src这个目录，而且还要有index.js ， 否则就会报错.这个目录后期可以修改，但是我们需要先了解webapck默认是怎么操作的

  • 4在项目根目录（如：package.json）下执行打包命令： npx webpack

image.png

  • 这里我们可以看到npx webpack 命令默认给我们生成一个dist文件夹和main.js文件

Webpack配置文件

  • webpack配置文件作用： 修改webpack默认的配置

创建配置文件

  • 在项目根目录下创建默认配置文件: webpack.config.js
  • 在配置文件中导出配置
module.exports = {
	//自定义配置写在这里（对象键值对）

}

image.png

webpack常见配置作用

  • 1.mode : 打包模式

    • 默认值production : 生产模式（压缩，混淆，加密....... 不可读）
    • development :开发模式(代码不会压缩 混淆)

  • 2.output: 出口文件(对象类型)

    • path : 设置出口文件夹（必须是绝对路径）

      • 默认值: ${__dirname}/dist

    • filename: 设置出口js文件名 (相对于path路径)

      • 默认值: main.js

  • 3.entry : 出口文件

    • 默认值(相当于项目根目录): ./src/index.js
//在src中新建js文件夹，将index.js、add.js拖入
module.exports = {
	//自定义配置写在这里（对象键值对）
  mode: "development",
  // 修改出口文件
  output:{
    // 出口文件夹( 必须是绝对路径，没有就自动创建)
    path:`${__dirname}/build`,
    // 出口文件，相当于path路径
    filename:'boundle.js'
  },
  // 修改文件入口
  entry:'./src/js/index.js'
}

    --npx webpack

image.png

webpack其他配置

  • "build" : "webpack"

    • 相当于是给你的当前项目新增了一个命令: npm run build

      • 这个命令等价于npx webpack, 只是额外新增了一个命令。 原来的默认命令还是可以用

  • "dev" : "webpack --config webpack.dev.js"

    • 相当于给你的当前项目新增了一个命令 ： npm run dev

      • 这个命令将不再使用默认的配置文件webpack.config.js, 而是使用自定义配置文件 webpack.dev.js

  • 注意点

    • 如果使用npm run build : 还是用默认配置文件来配置你的webpack

    • 如果使用npm run dev : 就会使用自定义配置文件来配置你的webpack

      • 这个命令相当于npx webpack --config webpack.dev.js

        • npx webpack --你的配置文件 ： 用自定义配置文件打包webpack

image.png

avatar
文章
阅读
粉丝