信息公司网站建设方案+游戏,个人公众号怎么运营挣钱,简约网站程序,有什么可以做兼职的网站webpack相信大家都已经不陌生了#xff0c;应用程序的静态模块打包工具。前面我们总结了vue#xff0c;react入门基础知识#xff0c;也分别做了vue3的实战小案例#xff0c;react的实战案例#xff0c;那么我们如何使用webpack对项目进行模块化打包呢#xff1f; 话不多…webpack相信大家都已经不陌生了应用程序的静态模块打包工具。前面我们总结了vuereact入门基础知识也分别做了vue3的实战小案例react的实战案例那么我们如何使用webpack对项目进行模块化打包呢 话不多说开始
目录
一、熟悉webpack的主要功能
二、Webpack的核心概念
三、使用webpack5搭建脚手架
1.然后执行npm init 进行初始化 npm install webpack webpack-cli
2.在项目src文件夹下新建main.js和 toolsindex.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和 toolsindex.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呢
在srcstylestyle.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.如何处理图像资源呢 在srcimg下导入一张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代码
Babel7的入门基础知识 Babel 7 实践验证案例
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博客
