webpack之路 - 随笔分类 - liumcb

使用bable-polyfill

摘要：今天在看同事写的代码，webpack中使用entry入口的时候，有一段很奇怪的代码，引入了bable-polyfill，我以前没有这样配置过。 entry: { app: ['babel-polyfill', './src/index.js'], }, bable-polyfill：作用：是用来阅读全文

posted @ 2021-11-18 11:13 liumcb 阅读(118) 评论(0) 推荐(0)

webpack热更新原理

摘要：原理简单介绍：阅读全文

posted @ 2020-10-28 18:33 liumcb 阅读(99) 评论(0) 推荐(0)

webpack按需加载

摘要：什么是按需加载：当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间，提高访问速度。按需加载的实现方式：使用webpack打包的出来的文件要实现以上的要求有两种方式，一个是webpack特有的require.ensure方阅读全文

posted @ 2020-10-28 18:03 liumcb 阅读(1252) 评论(0) 推荐(0)

什么是process.env？

摘要：什么是process.env？这里的process.env就是Nodejs提供的一个API，它返回一个包含用户环境信息的对象在webpack中 process.env 的作用？通常的做法是，新建一个环境变量NODE_ENV，用它确定当前所处的开发阶段，生产阶段设为production，开发阶段阅读全文

posted @ 2020-10-27 15:30 liumcb 阅读(1392) 评论(0) 推荐(0)

webpack.DefinePlugin

摘要：webpack中设置环境变量，用来区别开发环境和正式环境 development:测试环境接口，production:线上环境接口 webpack.config.dev.js 测试环境配置 new webpack.DefinePlugin({ "process.env": { NODE_ENV: 阅读全文

posted @ 2020-10-27 15:27 liumcb 阅读(514) 评论(0) 推荐(0)

webpack发布时删除console 删除警告debugger

摘要：configureWebpack:{ optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { // 删除注释 output:{ comments:false }, // 删除console debugger 删除警告 co 阅读全文

posted @ 2020-10-27 15:13 liumcb 阅读(917) 评论(0) 推荐(0)

webpack-启动热更新

摘要：搭建好webpack配置之后，开始启动热更新。第一步：安装 webpack-dev-server 注意版本问题 npm install webpack-dev-server --save-dev 第二步：在webpack.config.js 进行插件启用 var webpack = require 阅读全文

posted @ 2020-10-23 17:28 liumcb 阅读(246) 评论(0) 推荐(0)

清除插件和重新生成HTML模板出现的问题

摘要：webpack安装 clean-webpack-plugin 和 html-webpack-plugin 是为了重新生成打包的bundle之后清空以前的的bundle之后创建一个新的html文件并将新的bundle插入到HTML中但是在这个过程中出现一个问题，我创建的HTML模板中，含有id= ‘ 阅读全文

posted @ 2020-10-23 16:45 liumcb 阅读(117) 评论(0) 推荐(0)

搭建webpack3+版本时出现的问题汇总

摘要：很近以前搭建过webpack脚手架，最近想重新再来一次，发现搭建过程中各种问题，现在记录一下： 1、因为webpack5+与npm版本不兼容的问题：查看webpack -v版本的时候报错：应该是npm版本跟webpack版本冲突造成的。但是由于我的电脑需要npm的特定版本5.6.0 所以我没有升级阅读全文

posted @ 2020-10-23 15:57 liumcb 阅读(947) 评论(0) 推荐(0)

webpack搭建出现的问题

摘要：今天在搭建webpack+react，虽然现在webpack已经是第5版本了，但是一直报错，我先搭建一版3.0版本 1.使用固定版本来搭建webpack npm install --save-dev webpack@3.6.0 2.安装babel-loader报错 babel-loader@8 re 阅读全文

posted @ 2020-10-22 18:56 liumcb 阅读(134) 评论(0) 推荐(0)

webpack小知识点

摘要：1.什么是bundle,什么是chunk，什么是module? bundle:有webpack打包出来的文件 chunk：webpack在进行模块的依赖分析的时候，代码分割出来的代码块 module:开发中的单个模块阅读全文

posted @ 2020-10-20 17:38 liumcb 阅读(62) 评论(0) 推荐(0)

webpack常用plugin插件都有哪些？

摘要：define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置) ignore-plugin：忽略部分文件 html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader) web-webpack-plugin：可方便地为单页应用输出阅读全文

posted @ 2020-10-20 16:26 liumcb 阅读(1944) 评论(0) 推荐(0)

webpack-重温二：loader

摘要：什么是loader？ loader 用于对模块的源代码进行转换。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Loader在m 阅读全文

posted @ 2020-10-19 17:55 liumcb 阅读(104) 评论(0) 推荐(0)

webpack一：四个核心概念：

摘要：1.什么是webpack？ webpack是以现代的JavaScript应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 2.四个核心概念阅读全文

posted @ 2020-10-19 16:20 liumcb 阅读(139) 评论(0) 推荐(0)

webpack-优化

摘要：在webpack打包的时候，打包的速度和大小会随着项目的增大而变化，为了更优化项目，可以通过webpack来进行优化。 1、devtool ：调试不同的调试方式的大小和速度不同，可以开发和生产用不同的调试方式 2、UglifyJSPlugin： js压缩插件，可以压缩打包的js大小 3、babe 阅读全文

posted @ 2020-06-05 13:33 liumcb 阅读(139) 评论(0) 推荐(0)

webpack构建流程

摘要：日常经常说webpack打包，但是webpack打包的流程是什么，我一般没有关注过。现在大概记录一下打包流程： 1 初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果； 2 开始编译：上一步得到的参数初始化compiler 阅读全文

posted @ 2020-06-05 13:12 liumcb 阅读(606) 评论(0) 推荐(0)

webpack-loader

摘要：在使用webpack的时候，总是要首先安装loader，但是为什么要安装loader？以及都有哪些类型的loader？ 1、为什么要使用loader？ webpack 自身只理解 JavaScript（js结尾的文件），loader 让 webpack 能够去处理那些非 JavaScript 文件。阅读全文

posted @ 2020-06-05 10:38 liumcb 阅读(152) 评论(0) 推荐(0)

随笔分类 - webpack之路