![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
飞翔的熊blabla
开发了一些列工具,指数提升代码速度
http://www.520webtool.com
展开
-
理解webpack中的devTool的配置项
2.1. eval eval 会将每一个module模块,执行eval,执行后不会生成sourcemap文件,仅仅是在每一个模块后,增加sourceURL来关联模块处理前后对应的关系。在webpack中配置devtool: 'eval', 如下打包后的代码:(function(modules) { // webpackBootstrap "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmo.转载 2020-11-15 16:35:27 · 1458 阅读 · 0 评论 -
webpack4环境配置之process.env
通常情况下,我们需要针对不同环境(开发环境、集成环境、生产环境等),进行相应策略的打包(比如是否替换接口地址,代码是否压缩等)。webpack就是通过process.env属性加以区分。webpack是npm生态中的一个模块,webpack的运行依赖于node的环境,没有node是不能打包的。这里的process.env就是Nodejs提供的一个API,它返回一个包含用户环境信息的对象。如果我们给Nodejs 设置一个环境变量,并把它挂载在 process.env 返回的对象上,便可以在代码中进行相.转载 2020-10-17 17:22:58 · 1043 阅读 · 0 评论 -
解决wepacke配置postcss-loader时autoprefixer失效问题
本文主要讲述了:作用 安装 示例 配置正文作用postcss-preset-env允许开发者使用最新的CSS语法而不用担心浏览器兼容性。postcss-preset-env会将最新的CSS语法转换为目标环境的浏览器能够理解的CSS语法。安装 今天在配置postcss-loader,使用autoprefixer发现根本没有用。 postcss.config.js中是这样的: module.exports = { plugins:[ requi转载 2020-10-01 12:07:11 · 1544 阅读 · 1 评论 -
解析 神奇的 Object.defineProperty
这个方法了不起啊。。vue.js和avalon.js 都是通过它实现双向绑定的。。而且Object.observe也被草案发起人撤回了。。所以defineProperty更有必要了解一下了几行代码看他怎么用 var a= {} Object.defineProperty(a,"b",{ value:123 }) console.log(a.b);//123很简单,,它接受三个参数,而且都是必填的。。传入参数第一个参数:目标对象第二个参数:需要定转载 2020-09-12 23:24:30 · 288 阅读 · 0 评论 -
【javascript】手写一个webpack loder
【javascript】手写一个webpack loder手写一个loader为什么需要loader? webpack 实际上只能处理js文件,那么对于除了js文件的其他类型的文件 比如 css sass 等。。我们不能直接用webpack来处理。 我们需要一个翻译员(loader)来帮我们的文件处理一下。有时候我们不只需要一个翻译员来工作,比如要把文言文翻译成外语,首先要转换成白话文,然后转换为外语。 Loader就像一个翻译员,能将源文件经过转化后输出新的结果,并且一个文件还可以链式转载 2020-08-25 19:45:09 · 206 阅读 · 0 评论 -
手写webpack——增加loader和plugin
本文中,“webpackSimple”指项目,而“localWebpack”或者“demo-start'”均指手写的webpack工具上一节,我做了一个简单的webpack,虽然解决了模块化引入的问题,但它目前只支持js模块引入。这一节,我准备给这个低配版的webpack增加loader和plugin,让它可以引入css之类的文件,并且完成一些别的操作。言归正传,下边开始首先,我们先写两个简化版loader——style-loader和less-loader首先在项目“webpackSimple”.转载 2020-08-25 19:43:25 · 399 阅读 · 0 评论 -
webpack快速入门——CSS进阶:消除未使用的CSS
使用PurifyCSS可以大大减少CSS冗余1.安装cnpm i purifycss-webpack purify-css --save-dev2.引入glob,因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。引入purifycss-webpack3.配置new PruifyCSSPlugin({ paths:glob.sync(path.join(__dirname,'sr.转载 2020-08-23 19:26:22 · 402 阅读 · 0 评论 -
webpack4.29.x成神之路(十三) 摇树优化(tree shaking)
上节:source-map上节目录如下:概念官方:描述移除 JavaScript 上下文中的未引用代码。也就是希望webpack在打包时把没用到的函数删掉,最常见的就算第三方函数库:lodash,date-fns等。新建src/js/math.js:export function add(...arg) { return arg.reduce((x, y) => x + y);}export function sub(...arg) { return arg.转载 2020-08-23 13:58:39 · 331 阅读 · 0 评论 -
Webpack的Code Splitting实现按需加载
一. 什么是Code Splitting?在最开始使用Webpack的时候, 都是将所有的js文件全部打包到一个build.js文件中(文件名取决与在webpack.config.js文件中output.filename), 但是在大型项目中, build.js可能过大, 导致页面加载时间过长. 这个时候就需要code splitting, code splitting就是将文件分割成块(chunk), 我们可以定义一些分割点(split point), 根据这些分割点对文件进行分块, 并实现按需加载.转载 2020-08-23 13:19:55 · 981 阅读 · 0 评论 -
webpack打包html里面img后src为“[object Module]”问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">...转载 2020-08-21 21:31:38 · 445 阅读 · 0 评论