webpack相信大家都已经不陌生了,应用程序的静态模块打包工具。前面我们总结了vue,react入门基础知识,也分别做了vue3的实战小案例,react的实战案例,那么我们如何使用webpack对项目进行模块化打包呢? 话不多说,开始!!
目录
一、熟悉webpack的主要功能
二、Webpack的核心概念
三、使用webpack5搭建脚手架
1.然后执行npm init 进行初始化, npm install webpack webpack-cli
2.在项目src文件夹下新建main.js和 tools>index.js文件
3.打包index.html文件
4.打包css文件。如果我们想创建一个css呢?
5.如何处理图像资源呢?
6.babel的转化
7.处理.vue结尾的文件
8.如何自动运行打包后的index文件
一、熟悉webpack的主要功能
1. 模块打包:将项目中的所有模块(JavaScript、CSS、图片等)当作一个整体,通过依赖关系将它们打包成一个或多个静态资源文件
2.依赖管理:Webpack可以分析模块之间的依赖关系,根据配置的入口文件找出所有依赖的模块,并将其整合到打包结果中
3.文件转换:Webpack
本身只能处理JavaScript
模块,但通过加载器(Loader)
的使用,可以将其他类型的文件(如CSS、LESS、图片等)转换为有效的模块,使其能够被打包到最终的结果中
4.代码拆分:Webpack支持将代码拆分成多个模块,按需加载,实现按需加载和提升应用性能
5.插件系统:Webpack提供了丰富的插件系统,可以通过插件实现各种功能的扩展,例如压缩代码、自动生成HTML文件等
总之,Webpack的主要功能是将项目中的多个模块打包成一个或多个静态资源文件,并提供了丰富的功能和插件系统来满足前端开发的需求
二、Webpack的核心概念
Webpack的核心概念包括entry(入口)、output(输出)、loader(加载器)和plugin(插件)
1.Entry 【入口文件】, 指定Webpack的入口文件,Webpack将从指定的入口文件开始分析和构建依赖关系树。入口可以是单个文件或多个文件;
2.Output【输出】义打包输出的文件及路径,指定Webpack打包后的文件输出的路径和文件名
3.Loader【加载器】Webpack
本身只能处理JavaScript
模块,但通过Loader
的使用,可以处理其他类型的文件(如CSS、LESS、图片等)
4.Plugin【插件】 插件用于扩展Webpack的功能。它可以在打包的不同阶段执行特定的任务。例如,可以使用插件来压缩代码、拆分代码、生成HTML文件等。插件通过在Webpack配置中引入并实例化,然后将其添加到plugins数组中。
三、使用webpack5搭建脚手架
1.然后执行npm init 进行初始化, npm install webpack webpack-cli
npm init //初始化
npm install webpack webpack-cli //安装webpack以及webpack-cli依赖包
查看项目package.json文件 已经有webpack相关版本信息
2.在项目src文件夹下新建main.js和 tools>index.js文件
main文件内容
// mian.js文件
import {add} from '/src/tools/index'
console.log(add(2,3));
修改我们public文件夹下的index.html 文件
在根目录新建 webpack.config.js文件 配置初入口文件信息
//webpack.config.js文件
const path = require("path")module.exports = {mode: 'development', // 指定为开发模式// 入口文件entry: {main: './src/main.js'},// 出口文件output: {// 输出到dist文件夹(打包自动生成)path: path.resolve(__dirname, 'dist'), // __dirname:表示当前文件的绝对路径(根目录)// 输出文件名在dist文件夹里的js文件夹的chunk.js下filename: 'js/chunk-[contenthash].js' // 使用由生成的内容产生的 hash}
}
修改package.json文件 我们创建了webpack的打包命令
现在试着在终端输入 npm run build 命令
npm run build
这里可以看到dist文件夹下已经生成了打包好的文件。
可以发现对比传统脚手架的npm run build,我们自己搭建的脚手架并没有在dist文件夹里生成index.html文件,现在我们来试试吧!
3.打包index.html文件
3.1安装插件 npm install html-webpack-plugin -D
npm install html-webpack-plugin -D
在webpack.config.js文件中引入插件,并且配置插件相关信息如下:
现在我们把dist/js下的文件删掉,然后重新打包 可以看到我们已经生成html文件了
4.打包css文件。如果我们想创建一个css呢?
在src>style>style.css 文件
这里是main.js文件,引入样式文件以及向html添加了内容。
//main.js
import './style/style.css'
const el = document.createElement('div')
el.className = 'title'
el.innerHTML = "这是坚强的土豆子"
document.body.appendChild(el)
安装打包css文件的依赖文件 npm install css-loader style-loader
npm install css-loader style-loader
在webpack.congfig文件中配置信息
再次执行 npm run build,然后index.html文件浏览器打开,可以看到我们刚才加载的css效果了。
一些常用的Webpack loader:
babel-loader
:将ES6+代码转换为ES5语法,以便在旧版本的浏览器中运行。style-loader
和css-loader
:用于处理CSS文件。css-loader主要负责处理样式文件中的import
和url
语句,而style-loader将转换后的CSS模块直接注入到HTML页面中。file-loader
和url-loader
:用于处理图片和其他资源文件。file-loader会为每一个文件生成一个对应的文件,而url-loader将小于设定大小的文件转换为base64编码的URL,减少HTTP请求sass-loader
和less-loader
:用于处理Sass和Less预处理器。它们将Sass和Less代码转换为普通的CSS代码postcss-loader
:用于为CSS代码添加浏览器兼容性前缀,以确保在不同浏览器上的一致性。html-loader
:用于处理HTML文件,将其中的图片等资源转换为Webpack可以识别的模块。
同理我们如果使用less,也需要先下载less-loader。
新建style.less文件 ,同时哦在main.js文件中引入 文件
//main.js文件添加
import './style/style.less'
webpack.config.js中配置信息。
注意:下图 webpack.config文件less配置信息部分 options默认是部分
css3
属性需要通过postcss-loader
和postcss-preset-env
才能添加浏览器兼容性前缀,以确保在不同浏览器上的一致性。需要先下载安装
postcss-loader
和postcss-preset-env
npm install postcss-loader postcss-preset-env -D
执行npm run build ,浏览器打开发现文字内容字体已经按照我们设置的改变了
5.如何处理图像资源呢?
在src>img>下导入一张png图片,并在main.js文件中导入图片在html中显示
在webpack文件中进行配置信息,在webpack4版本中(webpack5版本不用这一步)
npm i file-loader url-loader -D
我们webpack5版本只需要在webpack.config文件中添加配置:
重新打包运行 npm run build ,可以看到我们刚刚加入的图片信息了。
每次运行打包命令后自动覆盖原来的文件js文件信息。
webpack.config.js文件出口文件设置添加clean:设置为true就可以了。这样每次打包后的文件只有一个最新的。
6.babel的转化
es6+
的语法在旧浏览器不适用,这就需要我们自己去转化成浏览器能识别的es5
代码
npm install @babel/core @babel/preset-env babel-loader -D
但在高版本的bebel中,我们可以在根目录建一个babel.config.js。webpack.config.js只需要下图配置。
7.处理.vue结尾的文件
新建vue页面,并在main.js中引入
1、下载安装 npm i vue vue-loader -D
2、 配置webpack.config.js文件
重新通过npm run build
运行之后,index.html页面成功响应:
8.如何自动运行打包后的index文件
如何使用npm run serve 运行项目的。需要先安装依赖:
npm i webpack-dev-server -D
接下来我们把package.json中的运行命令改成如下这样:
然后我们就可以用npm run serve启动项目了。
可以看到直接访就可以了,我们修改了msg的值,页面会自动刷新。
好啦,我们现在已经成功搭建了一个脚手架。
关于webpack的其他知识后续会更新。
Node.js基础知识请参考:Express基于Node.js基础知识【2】全面总结 推荐-CSDN博客