![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 82
时清云
自强不息,厚德载物;日拱一卒,功不唐捐;海纳百川,有容乃大。这世上没有最强的人,只有想变强的人,做一个简单真实的自己。
展开
-
如何在Vue CLI上配置process.env环境变量
我们一般用process.env.NODE_ENV来区分开发环境和线上环境。在开始本文之前,我先强调一下, process.env.NODE_ENV默认只有两种状态即development和production,development指开发环境,说白了就是本地开发即localhost环境(本地的开发),而production代表发布在任何服务上的服务(不管是dat、uat还是生产环境),node是不知道你服务是测试还是正式,除非你手动指定。通常认为都是线上环境。所以可以这样认为development代表本原创 2021-08-25 18:05:23 · 6749 阅读 · 0 评论 -
webpack中的style-resources-loader加载全局css变量
我们在项目中经常会遇到这种场景,抽离了一些公用的样式,并且还会定义一些变量,比如:variables , mixins , function,之前都是在每个样式文件中手动的@import导入。style-resources-loader的作用就是避免重复在每个样式文件中@import导入,在各个css 文件中能够直接使用 变量和公共的样式。例如我们抽离了这样一个scss文件作为公用的样式。common.scss内容如下:$themeColor: #3472FC; //主题色$hoverColor:原创 2021-02-09 16:33:53 · 2969 阅读 · 0 评论 -
treeShaking和sideEffects详解
什么是treeShaking?treeShaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。treeShaking有什么用?至于说有什么用呢?它的作用就是将程序中没有用到的代码在打包编译的时候都删除掉,这样能减少打包后包的体积大小,减少程序执行的时长和传统DCE(Dead Code Elimination)有什么区别?传统DCE是消除不可能执行的代码,而treeShaking虽然也是DCE新的实现方式,但是它是通过消除没有用到的代码来达到目转载 2021-01-26 22:07:09 · 691 阅读 · 0 评论 -
非常详细的解答了5个webpack疑问
原创 卤代烃 卤蛋实验室 2020-10-28链接:https://mp.weixin.qq.com/s/BHSihethgh_zH0K1J3qwnA1.webpack 中,module,chunk 和 bundle 的区别是什么?说实话我刚开始看 webpack 文档的时候,对这 3 个名词云里雾里的,感觉他们都在说打包文件,但是一会儿 chunk 一会儿 bundle 的,逐渐就迷失在细节里了,所以我们要跳出来,从宏观的角度来看这几个名词。webpack 官网对 chunk 和 bundle转载 2021-01-21 15:41:23 · 376 阅读 · 0 评论 -
webpack报错:Invalid options object. PostCSS Loader has been initialized using an options object that d
在做webpack配置css兼容的时候出现了postcss-loader插件不兼容问题配置代码如下:出现的错误原因是postcss-loader这个版本不支持在webpack。config。js文件中这么写解决办法:在项目根目录下新建一个postcss.config.js文件配置如下:webpack.config.js文件配置如下:把options选项注释掉。...转载 2020-12-31 23:35:37 · 9965 阅读 · 5 评论 -
webpack中require.context的作用
在我们项目开发中,经常需要import或者export各种模块,那么有没有什么办法可以简化这种引入或者导出操作呢?答案是肯定的,下面就为大家介绍一下require.context我们会这样引入组件:import A from 'components/A'import B from 'components/B'import C from 'components/C'import D from 'components/D'// ...这样很蛋疼,因为每加一个组件,可能都要写这么一句,这样有规律的转载 2020-07-20 22:41:55 · 663 阅读 · 0 评论 -
webpack 开发环境 process.env.NODE_ENV
(一).概述在工作中,根据开发环境不同,设置不同的变量、参数、和引入依赖,使打包更加的自动化,一劳永逸借助于 process.env.NODE_ENV 可以使我们区分开发环境查看环境变量1.安装nodejs2.通过终端(cmd),输入node,进入编辑模式3.输入process+回车, 显示进程4.输入process.env+回车,显示 当前环境(environment)5.输入process.env.NODE_ENV+回车,显示’undefined’说明 process.env.NODE转载 2020-06-30 07:36:39 · 1219 阅读 · 0 评论 -
webpack打包中path.resolve和__dirname的含义
在webpack打包中,我们经常会有这样的配置,const path = require('path');module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), // 对这一行代码有疑问 filename: 'my-first-webpack.bundle.js' }};那么我们来看一下path.resolve和__原创 2020-06-03 22:17:31 · 6449 阅读 · 0 评论 -
全面解析webpack
之前在用vue开发h5页面的时候用过webpack,但是没有怎么好好总结过,今天看到一篇小伙伴的文章,写的很不错,就想着转载过来,好好总结。进入正题:一、什么是webpackwebpack是一个打包工具,他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack?webpack是现代前端技术的基石,常规的开发方式,比如jquery,html,css静态网页开发已经落后了。现在是MVVM的...转载 2019-12-29 21:32:09 · 546 阅读 · 0 评论 -
详解babel的配置文件.babelrc
最近在搞项目迁移,一切都是从零开始。有的浏览器还不能识别最新的es6语法,在进行项目框架搭建的时候需要将es6最新的语法转化为浏览器能识别的语法,这个时候就用到了babel。一、什么是babel? 它是干什么用的?ES6是2015年发布的下一代javascript语言标准,到现在的ES2019,它引入了新的语法和API,使我们编写js代码更加得心应手,比如let、class、Symbol、 p...原创 2019-10-24 19:21:13 · 5946 阅读 · 0 评论 -
webpack学习之打包生成新的文件时 自动删除上次打包出来的文件
当webpack 打包时的 filename 设置的是 固定的名称时,每次打包的时候,新的文件会覆盖原来的文件,这样就不用删除原来的 output 出来的文件夹但是如果 filename = “[name].bundle.[hash:5].js” 这样的有占位符的文件名,每次生成的文件名是不一样的,也就不会去覆盖上次生成的文件,手动每次打包前,去先把 output的目录给删除掉就太麻烦了这时我...原创 2019-03-29 22:54:57 · 3218 阅读 · 0 评论 -
webpack打包工工具总结(1)
最近在学习webpack,于是就想着把学习webpack过程中遇到的问题总结下来。遇到了这样一个问题:在webpack.config.js这个文件进行配置的时候,代码如下:// webpack是用node写出来的,所以采用node的写法let path = require('path');let HtmlWebpckPlugin = require('html-webpack-plugin...原创 2019-03-21 23:26:59 · 525 阅读 · 0 评论 -
Webpack配置详解(package.json/webpack.config.js详细配置 )
Webpack配置详解(package.json/webpack.config.js详细配置 )webpack安装package.json配置以及模块安装webpack.config.js配置开启webpack-dev-server服务热替换插件的安装以及配置开启自动打开浏览器插件的安装以及配置加载器的安装以及配置完整package.json/webpack.config.js文件...转载 2018-12-17 22:51:43 · 9527 阅读 · 0 评论