webpack学习路径(01.webpack的配置及使用)

news/2024/7/5 21:21:58

对于webpack,我的理解是一种工具提供了友好的前端模块化开发的支持,可以解决代码压缩混淆,浏览器兼容性问题,以及提升性能等主要功能,

安装配置过程:

  • 首先创建一个根目录(随便创建一个文件夹),然后在根目录中运行终端cmd,然后在cmd中输入npm init
    -y,完成后会在根目录生成一个package.json文件,
  • 然后为了规范我们要在创建一个src文件用于放置代码,之后我们就可以在src中进行编程,此时当我们需要使用其他的库的时候我们可以使用npm直接安装,安装命令
    npm i ... -Snpm i ... -D(在cmd中使用); 如npm i jquery -S,

i是install的缩写,-S的作用是在package.json文件中的depencencies节点中写入所安装的插件版本号,这个节点所写入的版本号是代表开发以及发布的所有过程都一直需要使用的工具,如果只是开发时候才需要的工具则会使用-D这个指令并写入到devDepencencies,这两个语句分别是–save ,–save dev的缩写

  • 安装好插件后 我们在编程时写入一些比较高级的语法是遇到语法错误时,我们此时就会体现出webpack的作用了,
此时我们要使用npm安装相应版本的webpack; 相应指令:npm i webpack@5.42.1 webpack-cli@4.7.2

-D(webpack只在开发时需要所以写入到depencencies节点中);

  • 安装好之后我们需要在进行webpack的导包配置;
    首先我们需要先创建一个webpack的专属配置文件,创建一个’webpack.config.js’文件,然后在文件中输入:
module.exports={ mode:'development' }

这里是设置webpacke的运行模式模式有两种(开发模式,和生产模式module.exports={ mode:‘production’ }),当使用生产模式时,webpacke会帮我们压缩打包好的文件,然后还需要在package.json文件中的javascript节点中添加"dev":"webpack“代码,我自己的电脑因为某些原因需要多添加一点代码

"dev":"webpack --mode development"(如果已经配置过上一步的话这里就不用加上--mode development语句直接"dev":"webpack"就行了);

到这里就已经配置好了webpack。

  • 最后我们需要运行webpack的相应模块用于打包(打包就可以解决一些兼容,性能,存储问题);
    运行webpack的打包模块需要在终端中输入npm run dev;这时候如果cmd没报错的话那就证明你的配置没问题了。
    接下来你创建的根目录中就会自动生成一个dist文件夹,里面的main.js文件就是处理好之后的你的相印js文件。此时将这个文件导入到你的index.html中代替之前所导入的js文件即可解决兼容性问题.

http://www.niftyadmin.cn/n/3613030.html

相关文章

C#中直接打印Report文件(rdlc)

Visual Studio自带的报表文件(rdlc,后面提到的报表,都指rdlc报表文件)虽然功能相对不是十分强大,但应付一般的报表要求也是绰绰有余了。关于rdlc报表的使用和设计方法,这里就不做讲解了,本文主要…

士农工商

中国古代,把商排在了最低等级,其实这是有道理的,商人是滋生腐败的源头,以盈利为目的的运营,只要没有很好的规范,即使牺牲了全世界,也会有人去做,这里的重点就是规范,不过…

vsCode自动修复规范报错的配置

1.先要安装Eslint 和Prettier - Code formatter插件 2.在settings-json中添加 (1) //Eslint插件的配置 “editor.codeActionsOnsave”:{ “source.fixAll”:true, }, (2) //prettier配置 “eslint.alwaysShowStatus”: true, &quo…

HDOJ 1181 HDU 1181 变形课 ACM 1181 IN HDU

MiYu原创, 转帖请注明 : 转载自 ______________白白の屋题目地址:http://acm.hdu.edu.cn/showproblem.php?pid1181 题目描述:代码变形课Time Limit: 2000/1000MS (Java/Others) Memory Limit: 131072/65536K (Java/Others)Total Submission(s): 2655Accepted Submission(s)…

Linux Platform Device and Driver

从Linux 2.6起引入了一套新的驱动管理和注册机制:Platform_device和Platform_driver。 Linux中大部分的设备驱动,都可以使用这套机制, 设备用Platform_device表示,驱动用Platform_driver进行注册。 Linux platform driver机制和传统的device driver 机制…

前端路由工作原理

在这里插入图片描述