1.webpack简介
webpack is a module bundler(模块打包工具)
webpack是一个打包模块化JavaScript的工具，他会从入口模块出发，识别出源码中的模块化导入语句，递归的找出入口和其所有的依赖打包到一个单独的文件中，是工程化、自动化思想在前端开发中的体现。
2.安装webpack
2.1环境准备
安装nodeJS
安装完成查看版本命令
node -v
@H_404_33@
版本参考官网发布的最新版本，可以提升webpack的打包速度。
2.2全局安装（不推荐）
#安装webpack V4+版本是，需要额外安装webpack-cli
npm install webpack webpack-cli -g
#检查版本
webpack -v
#卸载
npm uninstall webpack webpack-cli -g
全局安装webpack 会将项目中的webpack锁定到指定版本，造成不同项目中因为webpack依赖不同版本而导致冲突，构建失败。当然这种冲突也可用webpack项目中局部安装来避免，接下来介绍。
2.3项目安装（推荐）
#安装罪行的稳定版本 -D指的是安装到开发环境 -S 生产环境
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
2.5举例说明
3.启动webpack执行构建
3.1 webpack默认配置
3.2 准备执行构建
- 新建src文件夹
- 新建src/index.js、src/index.json、src/other.js
###index.js
const json = required("./index.json");//commonjs
import {add} from "./other.js";//es module
console.log(json,add(2,3));
###index.json
{
"name":"JSON"
}
###other.js
export function add（n1,n2）){
return n1 + n2;
}
3.3 执行构建
npx webpack
举例
webpack 执行构建首先会找webpack.config.js配置文件，找不到走默认配置 以下的webpack默认配置
entry:
支持三种类型 字符串，数组，对象（多入口）
字符串，数组都是输出到指定的一个资源文件
对象类型可配置多入口，生成多个资源文件
4.loader
webpack 只支持.json和. js模块 不支持不认识的其他格式的模块
loader模块解析，模块转换器，用于把模块原内容按照需求转换成新内容。
webpack是模块打包工具，而模块不仅仅是js,还可以是css,图片或者其他格式，但是webpack默认只知道如何处理js和json模块，那么其他格式的模块处理和处理方式就需要loader 了。
常见的loader
style-loader
css-loader
.....
安装loader
npm install style-loader css-loader -D
webpack.config.js 配置
module :{
rules:[
{
test:/\.css$/,
rules:["style-loader","css-loader"],
}
]
}
再次执行打包命令
npx webpack
编译成功
实现效果
5.Plugins
- 作用于webpack打包整个过程
- webpack的打包过程是由（生命周期概念）钩子
- plugin可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或者你想要的事情
HtmlWebpackPlugin
htmlwebpackplugin会在打包结束后，自动生成一个html文件，并把打包生成的js模块引入到该html中。
npm install --save-dev html-webppack-plugin
cleanWebpackPlugin
做清理工作
npm install --save-dev clean-webpack-plugin
引入插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
每次编译打包会清理打包文件夹下的文件重新生成新的编译文件
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
