您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

入浅出篇-webpack

时间:2019-10-21 16:52:15  来源:  作者:

webpack简介:

  • webpack 是一个前端资源加载/打包工具。 他将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源

为什么使用webpack:

  • 转换Es6语法
  • 转换JSX
  • css预处理器/前缀补全
  • 图片压缩
  • 压缩混淆——不让源代码逻辑直接暴露

一. webpack安装:

  1. 安装 node.js —— 要使用webpack,必须确保电脑上存在着node.js这个运行环境
  2. 安装webpack —— 在命令行输入命令 npm install webpack -g
  • npm 是 node.js 管理插件用的工具,install表安装, -g表全局安装
  • 在命令行输入 webpack -v 查看其是否安装成功,并查看其版本

二. 配置文件出入口

  • 首先创建一个文件 : webwebpack.config.js —— 这个文件就当作我们的配置文件
entry:

1. 单个entry(写法1): module.exports = { entry: './input.js' 当前入口文件叫做 input.js } 2. 单个entry(写法2): module.exports = { entry: { main: '.input.js' } }; 3.多个entry module.exports = { entry : { hame : './home.js', about:'./about.js' other:'./other.js' } } 复制代码

output —— 出口就是webpack打包完成的输出:

1.单个entry情况下对应的output: module.exports = { entry: './src/index.js', output: { path : path.resolve(_dirname,'dist'), //输出后存储的路径 filename : 'output.bundle.js' // 输出后文件的名字 } }; 2.多个entry情况下对应的output: module.exports = { entry : { hame : './home.js', about:'./about.js' other:'./other.js' }, output: { path : path.resolve(_dirname,'dist'), filename : '[name].bundle.js' // name会自动替换文件名为入口的属性名 } } 复制代码

三. loader-常用loader:

  • Webpack自身只支持加载js和json模块,而Loader能让webpack去处理其他类型的文件
  • loader需要下载,如果不知道要下什么,可根据报错下载所需loader
url-loader - 将文件转换为base64 url的webpack加载程序,通常用于处理图片:

module.exports = { module: { rules : [{ test : /.(png|jpg|gif)$/i, //要匹配的文件 use : [{ loader : 'url-loader', //使用的规则 options : { limit:8192 //文件大小限制 } }] }] } }; 复制代码

babel-loader - 把高版本的js向后(es5)兼容

module :{ rules:[ //这个是url-loader { test:/.(png|jpg|gif)$/i, use:[ { loader:'url-loader', options:{ limit:8192 } } ] }, //这个是babel-loader { test:/.m?js$/, //检测将要匹配的文件 exclude: /(node_modules|bower_components)/, //要排除的文件 use:{ //使用了什么loader loader : 'babel-loader', options:{ presets:['@babel/preset-env'] //使用什么规则 } } } ] } 复制代码

sass-loader:

module.exports = { module: { rules : [ // sass { test: /.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, ] } }; 复制代码

四. Plugin-常用插件:

  • Plugin和loader是两个比较混淆和模糊的概念。Loader是用来转换和加载特定类型的文件,所以loader的执行层面是单个的源文件。而plugin可以实现的功能更强大,plugin可以监听webpack处理过程中的关键事件,深度集成进webpack的编译器,可以说plugin的执行层面是整个构建过程。Plugin系统是构成webpack的主干,webpack自身也基于plugin系统搭建,webpack有丰富的内置插件和外部插件,并且允许用户自定义插件
  • 与loader不同的是,使用plugin我们必须先引用该插件
例如:

const webpack = require('webpack'); // 用于引用webpack内置插件 const htmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件 module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({template: './input.html'}) ] }; 复制代码

minCssExtract:

plugins:[ new MiniCssExtracPlugin({ filename:'[name].css', //name 为 entry里的名字 不是必须设置 chunkFilename: '[id].css' //不是必须设置 }) ] //要使用这个的时候,要在sass-loader中的use里在配置一下,将style-loader换成这个MiniCssExtracPlugin.loader 复制代码

DefinePlugin:

- definePlugin允许创建可以配置的全局常量 new webpack.DefinePlugin([ 'service_url' : josn.stringify('http://www.baidu.com') // service_url 为变量,这样即使改变访问的地址,也可以通过变量来控制 ]) 复制代码

HtmlWebpackPlugin-帮助我们生成html文件

1. 系统默认生成的: plugins: [ new HtmlWebpackPlugin() // 这样就能执行了-> 就会生成index.html文件,并且会自动帮我们引入js和css文件 ] 2. 我们自定义的 new HtmlWebpackPlugin({ title: 'My App', //html的title filename: 'indexa.html' //生成的文件名字 template: 'template.html' //自己的输入文件的内容——在创建一个template.html文件 //就可以在template.html文件里定义title —— 在title标签里输入<%= htmlWebpackPlugin.options.title %> //同样也可在此文件里引用script 或 其他不需要打包的div }) //之后我们indexa.html里,就会出现template.html文件里定义的东西 复制代码

五. DevServer-热更新:

module.exports = { //... devServer: { contentBase: path.join(__dirname, 'dist'), //在哪个目录下启动该插件 ,并且此dist要与上面的output 相一致 compress: true, //是否压缩 port: 9000 // 启动的端口 // hot: true // 热替换 不写也是热替换 现在写true有可能报错,所以还是别写了吧 } }; 复制代码

注:

  • 通常我们都会初始化文件 获得查看配置文件的文件。
  • npm init - y

作者:Honer

链接:https://juejin.im/post/5da898376fb9a04dea5df587

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



Tags:webpack   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
图片来源于网络;如有侵权请联系删除对于创建vue项目有很多种方法;但是我觉得这种是相对比较方便的;不用去配置打包啊一些配置了;而且操作也是非常简单;只需要几步就可以了;现在我...【详细内容】
2020-12-28  Tags: webpack  点击:(299)  评论:(0)  加入收藏
webpack 对我来说曾经是一个怪物般存在一样,因为它有太多太多的配置项,相反,使用像create-react-app脚手架可以很轻松创建项目,所以有一段时间内,我会尽量避免使用 webpack,因为它...【详细内容】
2020-11-17  Tags: webpack  点击:(125)  评论:(0)  加入收藏
摘要:Webpack是一种前端资源构建工具,一个静态模块打包器。1. 摘要Webpack是一种前端资源构建工具,一个静态模块打包器。在Webpack看来,前端的所有资源文件(js/json/css/img/les...【详细内容】
2020-11-06  Tags: webpack  点击:(131)  评论:(0)  加入收藏
通过插件我们可以扩展webpack,在合适的时机通过Webpack提供的 API 改变输出结果,使webpack可以执行更广泛的任务,拥有更强的构建能力。 本文将尝试探索 webpack 插件的工作流程,进而去揭秘它的工作原理。同时需要你对webp...【详细内容】
2020-05-20  Tags: webpack  点击:(66)  评论:(0)  加入收藏
回想在2015-2016年的时候,开发者们开始渐渐把视线从大量使用Task Runner的Grunt工具,转移到Gulp这种Pipeline形式的工具。Gulp还可以配合上众多个性化插件(如gulp-streamify),从而使得整个前端的准备工作链路,变得清晰易控,...【详细内容】
2020-03-11  Tags: webpack  点击:(67)  评论:(0)  加入收藏
webpack简介: webpack 是一个前端资源加载/打包工具。 他将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源为什么使用webpack: 转换Es6语法 ...【详细内容】
2019-10-21  Tags: webpack  点击:(112)  评论:(0)  加入收藏
vue-cli全家套相信很多人都用过,但可能很多人不太清楚webpack为解决打包文件过大做了哪些事情,今天我们就主要来聊聊这个。 首先配置全局变量首先,通过指定环境,告诉webpack我们...【详细内容】
2019-09-10  Tags: webpack  点击:(315)  评论:(0)  加入收藏
Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南,在文档层面上还有所欠缺,大部分人对升级 Webpack 还是一头雾...【详细内容】
2019-09-09  Tags: webpack  点击:(161)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条