webpack配置核心概念

最新推荐文章于 2022-10-07 23:55:14 发布

原创最新推荐文章于 2022-10-07 23:55:14 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文详细介绍了Webpack的基本概念，包括模块打包工具的作用，安装与配置方法，以及关键配置项如entry、output、mode、loader和plugins。从零配置到个性化设置，让你快速上手并理解webpack在前端工程中的重要性。

清楚理理解和掌握webpack的配置、概念

文档

官方网站：https://webpack.js.org/

1.webpack简介

webpack is a module bundler(模块打包工具)
Webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，
识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入
口和其所有的依赖打包到一个单独的文件中
是工程化、自动化思想在前端开发中的体现

2.安装webpack

2.1-环境准备

nodeJs https://nodejs.org/en/

版本参考官网发布的最新版本，可以提升webpack的打包速度

2.2-全局安装不推荐

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g

# 检查版本
webpack -v

# 卸载
npm uninstall webpack webpack-cli -g

全局安装webpack，这会将你项目中的webpack锁定到指定版本，造成不
同的项目中因为webpack依赖不同版本而导致冲突，构建失败

2.3-项目安装推荐

# 安装最新的稳定版本
npm i -D webpack

# 安装指定版本
npm i -D webpack@<version>

# 安装最新的体验版本可能包含bug,不要用于生产环境
npm i -D webpack@beta

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

2.4-检查安装

webpack -v //command not found 默认在全局环境中查找
npx webpack -v // npx帮助我们在项目中的node_modules里查找webpack
./node_modules/.bin/webpack -v //到当前的node_modules模块里指定webpack

3.启动webpack执行构建

3.1- webpack默认配置

webpack默认支持JS模块和JSON模块
支持CommonJS Es moudule AMD等模块类型
webpack4支持零配置使用,但是很弱，稍微复杂些的场景都需要额外扩展

3.2- 准备执行构建

新建src文件夹
新建src/index.js、src/index.json、src/other.js

### index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));
### index.json
{
"name": "JOSN"
}
### other.js
export function add(n1, n2) {
return n1 + n2;
}

3.3- 执行构建

# npx方式
npx webpack

# npm script
npm run test

修改package.json文件：

"scripts": {
"test": "webpack"
},

原理理就是通过shell脚本在node_modules/.bin目录下创建一个软链接。

3.4-构建成功

我们会发现目录下多出一个 dist 目录，里面有个 main.js ，这个文件是一个可执行的JavaScript文件，里面包含webpackBootstrap启动函数。

3.5-默认配置

const path = require("path");
module.exports = {
// 必填 webpack执⾏行行构建⼊入⼝口
entry: "./src/index.js",
output: {
// 将所有依赖的模块合并输出到main.js
filename: "main.js",
// 输出⽂文件的存放路路径，必须是绝对路路径
path: path.resolve(__dirname, "./dist")
}
};

4.webpack配置核心概念

零配置是很弱的，特定的需求，总是需要自己进行配置
webpack有默认的配置文件，叫 webpack.config.js ，我们可以对这个文件进行修改，进行个性化配置

使用默认的配置文件：webpack.config.js
不使用自定义配置文件：比如webpackconfig.js，可以通过--config webpackconfig.js来指定webpack使用哪个配置文件来执行构建

webpack.config.js配置基础结构

module.exports = {
entry: "./src/index.js", //打包入口文件
output: "./dist", //输出结构
mode: "production", //打包环境
module: {
rules: [
//loader模块处理理
{
test: /\.css$/,
use: "style-loader"
}
]
},
plugins: [new HtmlWebpackPlugin()] //插件配置
};

4.1-entry:

指定webpack打包入口文件:Webpack 执行构建的第一步将从Entry 开始，可抽象成输入

//单入口 SPA，本质是个字符串
entry:{
main: './src/index.js'
}
==相当于简写===
entry:"./src/index.js"
//多入口 entry是个对象
entry:{
index:"./src/index.js",
login:"./src/login.js"
}

4.2-output:

打包转换后的文件输出到磁盘位置:输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

output: {
filename: "bundle.js",//输出文件的名称
path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录，必须是绝对路路径
},
//多入口的处理
output: {
filename: "[name]--[chunkhash:8].js",//利用占位符，文件名称不要重复
path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录，必须是绝对路径
},