文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

webpack如何使用

2023-07-02 12:34

关注

本篇内容介绍了“webpack如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

webpack介绍和使用

一、webpack介绍

1、由来

由于前端之前js、css、图片文件需要单独进行压缩和打包,这样团队人员处理很繁琐,然后 Instagram 团队就想让这些工作自动化,然后webpack应运而生。

2、介绍

webpack是一个模块打包器(module bundler),webpack视HTML,JS,CSS,图片等文件都是一种 资源 ,每个资源文件都是一个模块(module)文件,webpack就是根据每个模块文件之间的依赖关系将所有的模块打包(bundle)起来。

3、作用

4、拓展说明

5、webpack整体认知

(1)、webpack的核心概念分为 入口(Entry)、加载器(Loader)、插件(Plugins)、出口(Output);

webpack如何使用

webpack整体认知

二、webpack安装

1、安装node

使用 node -v 命令检查版本

2、安装cnpm

https://cnpmjs.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用 cnpm -v 命令检查版本

3、安装nrm的两种方法

https://www.npmjs.com/package/nrm

nrm可以帮助我们切换不同的NPM源的快捷开关,可以切换的NPM源包括:npmcnpmtaobaorednpmnpmMirroredunpm

4、安装webpack

三、webpack配置

0、搭建项目结构

webpack(项目总目录)

1、初始化一个项目(会创建一个package.json文件)

npm init

2、在当前的项目中安装Webpack作为依赖包

npm install --save-dev webpack

说明:--save :将配置信息保存到package.json中,

同时 --save :也是项目生产环境,项目发布之后还依赖的东西,保存在dependencies

例如:如果你用了 jQuery,由于发布之后还是依赖jQuery,所以是dependencies

--save-dev :是项目开发环境依赖的东西,保存在devDependencies中

例如:写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是devDependencies

3、当前项目结构

webpack如何使用

当前项目结构

4、实现CSS打包

5、实现SCSS打包

6、实现Less打包

7、实现打包url资源(图片、gif、图标等)功能

8、Webpack-dev-server结合后端服务器的热替换配置

webpack-dev-server提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading),同时把生成好的js和html构建到我们的电脑内存中,这样的话,即使我们的目录中没有了相关js等文件,还能够加载出来,这样能够提高我们页面运行速度。

9、ES6转换为ES5语法

// 实现 url 资源打包                    {                        // 图片文件使用 url-loader 来处理                        test: /\.(png|jpg|gif|ttf)$/,                        use: [{                            loader: 'url-loader',                            // options 为可以配置的选项                            options: {                                limit: 8192                                    // limit=8192表示将所有小于8kb的图片都转为base64形式                                    // (其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)                            }                        }]                    },                    // 实现 ES6转 ES5                    {                        test: /\.js$/,                        exclude: /(node_modules)/,  // exclude 排除的意思,把 node_modules文件夹排除编译之外                        use: {                            loader: 'babel-loader',                            options: {                            // presets 预设列表(一组插件)加载和使用                            presets: ['env'],                            plugins: ['transform-runtime'] // 加载和使用的插件列表                            }                        }                    }

10、防止文件缓存(生成带有20位的hash值的唯一文件)

11、抽取CSS为单独文件

12、开发环境和生产环境的分离

(1)开发环境与生产环境分离的原因如下:

  • 在开发环境中,我们使用热更新插件帮助我们实现浏览器的自动更新功能,我们的代码没有进行压缩,如果压缩了不方便我们调试代码等等,所以以上这些代码不应出现在生产环境中。

  • 生产环境中,我们把项目部署到服务器时,我们会对代码进行各种各样的优化,比如压缩代码等等,这时候我们不应该把这些代码放到开发环境中,不利于代码开发和调试。

总结:针对以上这些说明,我们很有必要把区分开发环境与生产环境分离。

(2)开发环境的配置和生产换环境配置的区别。

  • 开发环境有的配置,生产环境不一定有,比如说热更新时使用到的HotModuleReplacementPlugin

  • 生产环境有的配置,开发环境不一定有,比如说用来压缩js用的UglifyJsPlugin

怎样执行命令

13、在生产环境中配置代码压缩功能

四、webpack1和webpack2的区别

webpack1.0已经废弃使用,建议使用webpack2.0+

resolve.modulesDirectories 被重命名为 resolve.modules

module.loaders 将继续支持,但在未来它将被module.rules 替换。

“webpack如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯