webpack01 -- webpack安装和配置

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 和 export
• node 是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（开发环境不压缩）

自定义配置文件

1. 开发模式
   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：配置文件
  },

2. 生产模式
   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"
  },

执行命令行：