webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 前端工程化：模块化，组件化，规范化，自动化（自动化构建，自动化部署，自动化测试） 代码打包和构建，我们使用webpack ,rollup ,vite

webpack作用

代码转换文件优化代码分割模块合并自动刷新自动发布

一、webpack安装

前提条件

请确保安装了 Node.js 的最新版本 node中文网：http://nodejs.cn/ 或者 https://webpack.docschina.org/concepts/

本地安装

//node -v 安装的node版本 //npm install xxx -D安装到开发环境 //npm install xxx 安装到生产环境 npm install --save-dev webpack npm install --save-dev webpack@<version> //如果你使用 webpack 4+ 版本，你还需要安装 CLI。 npm install --save-dev webpack-cli //一起安装（安装到生产环境） npm install webpack webpack-cli //安装到开发环境 npm install webpack webpack-cli -D // -D === --save-dev //npm 可以用 yarn cnpm（需要安装）

全局安装

npm install --global webpack

建议本地安装

项目中webpack的基本安装

首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev

webpack 运行

0配置

npx webpack （npx是5.2版本以后npm提供的命令）

//必须根目录下，必须是默认src文件夹下的index.js,默认输出到dist文件下的 |-dist |- main.js |-src |-a.js |-index.js |-index.html

es6中导入和导出是import 和 exportnode 是require 和 module.exports方式导入和导出。node_modules下的.bin 下可执行文件webpack命令，命令内部会调用webpack-cli解析用户数据进行打包

pakage.json 中 script 配置命令

"scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" },

dev:开发环境中；build：生产环境中 运行方式: npm run dev / build

二、配置webpack

webpack.config.js

webpack配置文件名：webpack.config.js（最好不要更改），遵循commonJS语法规范。

const path = require("path");//commonJS导入模块 path:node 自带的模块 module.exports = {//commonJS导出模块 mode:"develmpent",//开发环境 entry:"./src/index.js",//入口文件 output:{//输出文件 path:path.resolve(__dirname,"dist"),//文件的绝对路径，到dist目录 //__dirname:当前项目的绝对路径 filename:"bundle.js" //文件名 } }

pakage.json

"scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" },

dev:开发环境中；build：生产环境中 运行方式: npm run dev / build 或者：npx webpack --config webpack.config.js 执行后打包的bundle.js（开发环境不压缩）

自定义配置文件

开发模式 webpack.dev.js //根目录 |- webpack.config.js |- webpack.dev.js const path = require("path"); module.exports = { mode:"develmpent",//开发环境 entry:"./src/index.js",//入口文件 output:{//输出文件 path:path.resolve(__dirname,"dist"),//文件的绝对路径，到dist目录 filename:"bundle1.js" //文件名 } }

package.json

//json文件不允许注释，此处仅为解释说明 "scripts": { "dev": "webpack --config ./webpack.dev", //开发环境 config：配置文件 }, 生产模式 webpack.pro.js //根目录 |- webpack.config.js |- webpack.dev.js const path = require("path"); module.exports = { mode:"production",//开发环境 entry:"./src/index.js",//入口文件 output:{//输出文件 path:path.resolve(__dirname,"dist"),//文件的绝对路径，到dist目录 filename:"bundle2.js" //文件名 } }

package.json

//json文件不允许注释，此处仅为解释说明 "scripts": { "dev": "webpack --config ./webpack.dev", //开发环境 "build": "webpack --config ./webpack.pro" //生产环境 },

提取出公共配置

webpack.common.js

const path = require("path"); module.exports ={ mode:"production", entry:"./src/index.js", output:{ path:path.resolve(__dirname,"dist"), filename:"bundle.js" } }

webpack.dev.js

const path = require("path"); const {merge} = require('webpack-merge'); const common = require('./webpack.common.js'); console.log(merge); module.exports = merge(common,{ mode:"development", entry:"./src/index.js", output:{ path:path.resolve(__dirname,"dist"), filename:"bundle1.js" } })

webpack.dev.js

const path = require("path"); const {merge} = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports=merge(common,{ mode:"production", entry:"./src/index.js", output:{ path:path.resolve(__dirname,"dist"), filename:"bundle2.js" } }) "scripts": { "dev": "webpack --config webpack.dev.js", "build": "webpack --config webpack.pro.js" },

执行命令行：