这是我参与11月更文挑战的第6天,活动详情查看:2021最后一次更文挑战
WebPack5 初体验
1, 前言
webpack功能将不同类型资源按模块处理进行打包,最终产出静态资源, webpack支持不同规范的模块化开发
2, 环境搭建
为防止环境不同,接下来所有的操作都可以基于我的版本进行操作。
1, 如果你的webpack版本和我的不一样,可以先卸载,然后指定版本安装
npm uninstall webpack webpack-cli -g
2, 版本
node -v
: v14.16.1
webpack --version
: webpack 5.29.0/ webpack-cli 4.6.0
指定版本安装
npm install webpack@5.29.0 -g
全局安装面临一个问题,当你的项目给到其他同事运行的时候,他的webpack版有可能和你的不一样,这个时候你需要在项目里面也安装一份webpack
npm install webpack@5.29.0 --save-dev
3, webpack简介
webpack 是一个前端资源构建工具,一个静态模块打包器,在webpack看来,前端的所有资源文件都会作为模块处理,它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。
(1)初始化package.json
npm init
(2)安装jquery
npm i jquery
import $ from 'jquery'
$('#title').click(() => {
$('body').css('backgroundColor', 'deeppink')
})
通过上面简单的演示,可以发现,单纯的再JS项目里面引入ES语法,和less文件,会错误,这个时候,我们就需要webpack帮助我们。
4, webpack的五个核心
(1) Entry
入口指:webpack以哪个文件为入口起点开始打包,分析构建内部依赖图
(2) Output
输出指:webpack打包后的资源bundles输出到哪里去,以及如何命名
(3) Loader
Loader让webpack能够去处理那些非JavaScript文件
(4) Plugins
Plugins插件可以用于执行范围更广的任务,插件的范围包括,从打包优化和压缩一直到重新定义环境中的变量等
(5) Mode
Mode指:webpack使用相应模式的配置
选项 | 描述 | 特点 |
---|---|---|
development | 会将process.env.NODE_EVN 的值设为development ,启用NamedChunksPlugin 和NamedModulesPlugin | 能让代码本地调试 |
production | 会将process.env.NODE_EVN 的值设置为production , 同时启用:FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcateenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin , 和 UglifyJsPlgin | 能让代码优化上线 |
5, webpack初体验
错误提示:在单独执行webapck命令的时候,报错了
Error: Cannot find module 'webpack-cli/package.json'
解决方案:全局安装webpack-cli
npm i -g webpack-cli
(1) 新建src/index.js
**开发运行指令: **
webpack ./src/index.js -o ./build/build.js --mode=development
**指令解析: **
webpack会以 ./src/index.js 为入口文件开始打包 , 打包后输出到:./build/build.js里面
生成运行指令
webpack ./src/index.js -o ./build/build.js --mode=production
提示: 中间出了一个错误小插曲
总结:
1, 默认情况下,webpack能处理JS/JSON文件, 不能处理css/img等其他资源文件,
2,生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
3,生产环境比开发环境多一个压缩JS代码
6, 打包样式资源
注意: 在项目中,为了防止每一次都需要安装这些插件,我是使用webpack的一个特性,在当前目录找不到插件的时候,默认回去它的父级目录找相对应的包
在开始之前,首先要创建webpack.config.js文件, 因为所有的webpack的loader, plugins都需要在配置文件中完成。 而且:当你运行webpack指令的时候,首先找到的就是整个webpack.config.js文件,然后再加载里面的配置。webpack是基于node平台运行的,才用的模块化是Common.js规范,我们在编写代码的时候,才用的是ES6规范。
(1) 最外层安装css-loader
npm i css-loader style-loader -D
(2) 最外层安装 less-loader
npm i less less-loader -D
(3)详细的webpack.config.js配置
在看下面的配置之前强调一点:
打包的输出路径文件:一般都是绝对路径。 通过nodejs中的path模块, __dirname:表示的是:当前文件所在的目录的绝对路径,然后在拼接上build文件夹。
less-loader, css-loader, style-loader都要加载顺序。
一次是:less-loader > css-loader > style-loader
因为:less-loader: 是把less文件编译成css文件
css-loader: 将CSS文件变成commonjs模块加载js中
style-laoder: 创建style标签, 将JS中的样式资源插入进行, 添加到head中
/**
* webpack.config.js webpack的配置文件
* 作用: 指示webpack干哪些活,当你运行webpack指令的时候,首先活找到这个配置文件,然后加载里面的配置
*
* 所有构建工具都是基于nodejs平台运行的, 模块化才用commonjs
* 而我们的代码是放在src,才用的是ES6的模块化
*/
const { resolve } = require('path')
module.exports = {
// webpack的核心配置
//入口起点
entry: './index.js',
// 输出
output: {
// 输出的文件名
filename: 'bundle.js',
// 输出路径: __dirname 是nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
// loader 配置
module: {
rules: [
// 详细的loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序,从右到左,从下到上,一次执行
// 创建style标签, 将JS中的样式资源插入进行, 添加到head中生效
'style-loader',
// 将CSS文件变成commonjs模块加载js中, 里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
'less-loader'
]
}
]
},
// 插件配置
plugins: [
// 详细的plugins的配置
],
mode: 'development' // production 生产模式
};