webpack
文章平均质量分 58
Mhua_Z
我很懒,没有添加简介
展开
-
九、webpack的基本使用,entry,template,tree-shaking,全局变量,this指向。(Mhua)
用于精简打包的代码,在 js 文件中,如果引入其它模块但是未使用的代码,将不打包进去。多模板文件配置:打包后会生成两个 html 文件,并且可以指定引入的js模块。webpack.config.js 配置 optimization 属性。webpack.config.js 配置文件的。修改webpack.config.js配置文件。,指定打包后文件输出 路径。...原创 2022-08-08 22:16:21 · 324 阅读 · 0 评论 -
八、webpack的基本使用,集成 postcss,typescript。(Mhua)
兼容低版本浏览器,webpack 会生成兼容语句。在 webpack.config.js 配置 css loader。安装 postcss-nested 插件,实现 css 嵌套用法。开启css模块化,修改webpack.config.js配置文件。在 app.js 使用 css 时需要当成模块来使用。修改 postcss.config.js 文件配置。新建 postcss.config.js 文件。在 package.json 中 加上 配置。安装 css 处理 loader。...原创 2022-08-08 21:58:53 · 226 阅读 · 0 评论 -
七、webpack的基本使用,source-map,dev-server,eslint(Mhua)
开发环境中:推荐使用 cheap-module-source-map,它可以单独生成一个文件,且只记录行数,同时对babel解析的混杂进来后,也不会导致代码行数的识别问题。1、通过 bundle 和 sourcemap 文件可以编译源码,也就是说线上有sourcemap 文件的话,增加暴露源码的风险。eslint 配置是和webpack无关的,但是在工程化开发环境中,是不可缺少的。在 webpack.config.js 配置 开发服务器。新建 webpack.config.js。...原创 2022-08-06 10:20:35 · 262 阅读 · 0 评论 -
六、webpack的基本使用,路径,压缩,缓存,拆分配置文件(Mhua)
在根目录新建 config 目录,新建 webpack.config.dev.js, webpack.config.prod.js 文件。配置 webpack.config.js,配置 publicPath 值。webpack.config.comm.js:公共文件配置。webpack.config.dev.js: 开发文件配置。webpack.config.prod.js:生成文件配置。webpack.config.prod.js 生成环境配置。webpack.config.dev.js 开发环境配置。.原创 2022-08-05 22:49:05 · 518 阅读 · 0 评论 -
五、webpack的基本使用,防止重复,入口文件,懒加载,预获取/预加载(Mhua)
页面展示一个按钮,并且点击按钮后,才会加载 math.build.js 文件。rel=“prefetch” 这里使用 prefetch 预加载,当我们首页内容加载完毕,在网络空闲的时候,才会加载 link 对应的文件。并且 index.html 文件,增加了 link 标签,链接到 math.build.js 文件。打开 dist 下的 app.html 文件, 三份 js 文件都引入到 app.html里面了。结果:生成了三份 js 文件。在webpack.config.js 文件,配置 entry。.原创 2022-08-05 22:48:08 · 1821 阅读 · 0 评论 -
四、webpack的基本使用,处理字体文件,CSV,XML文件(Mhua)
如JSON文件,CSV,TSV,XML。类似于:webpack 对 JSON 支持 实际上是内置的,也就是 import Data from “./data.json” 默认是正常的。但是要导入 CSV TSV XML ,需要使用 csv-loader、xml-loader。在 webpack.config.js 配置 module 参数。在 webpack.config.js 配置 module 参数。在js文件中就可以正常使用 xml 和 csv 文件了。webpack 处理字体文件配置。...原创 2022-08-04 22:03:45 · 489 阅读 · 0 评论 -
三、webpack的基本使用,loader,css文件处理(Mhua)
style-loader插件默认是将 样式 加载到 html文件的 head标签之前,mini-css-extract-plugin插件能够将所有css放到。开始打包,控制台出现报错信息,这是因为没有在 webpack.config.js文件进行配置。在 webpack.config.js 配置 css-loader 处理 css 文件。在入口文件 index.js 引入 style.css 文件。在入口文件index.js,导入style.less文件。配置webpack.config.js文件。...原创 2022-08-04 21:05:23 · 555 阅读 · 0 评论 -
二、webpack的基本使用,资源类型(Mhua)
在resource,inline类型之间自动选择,根据资源大小来区分,默认资源大小是以 8kb 为分界线。通过 asset/inline 设置,把对应资源文件 生成 dataUrl (base64格式)通过 asset/resource 设置,打包后,生成一个单独文件,并导出 url 路径。webpack提供了 四种 资源类型来加载除了 js以外的资源文件,如:图片。打包后,图片变成了 base64 格式。...原创 2022-08-04 20:57:16 · 139 阅读 · 0 评论 -
一、webpack的基本使用,安装,体验(Mhua)
-entry:指定入口文件--mode:指定模式 production 生产环境 development 开发环境。原创 2022-08-04 20:55:39 · 178 阅读 · 0 评论