webpack5之初体验

244 阅读2分钟

这是我参与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,启用NamedChunksPluginNamedModulesPlugin能让代码本地调试
production会将process.env.NODE_EVN的值设置为production, 同时启用:FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcateenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin, 和 UglifyJsPlgin能让代码优化上线

5, webpack初体验

1636204480717.png 错误提示:在单独执行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

提示: 中间出了一个错误小插曲

1636205402012.png

总结:

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

1636207820807.png

(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  生产模式
};

7, 项目地址

webpack5学习源码