小R.的博客

文章目录一、entry1、string：'./src/index.js'2、array：['./src/index.js', './src/add.js']3、object：{index: ['./src/index.js'], add: './src/add.js'}4、特殊用法二、output三、module四、resolve：解析模块的规则五、devServer六、optimization一、entry1、string：’./src/index.js’单入口打包形成一个chunk，输出一个b

文章目录一、webpack性能优化介绍1. 开发环境性能优化2. 生产环境性能优化二、三、四、五、六、七、一、webpack性能优化介绍1. 开发环境性能优化优化打包构建速度HMR优化代码调试source-map2. 生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包externalsdll优化代码运行的性能缓存(hash-chunkhash-contenthash)tree shakingcode split懒加载/预加载pw

文章目录一、提取css成单独文件二、css兼容性处理三、压缩css四、js语法检查五、js兼容性处理六、js压缩七、html压缩八、生产环境配置一、提取css成单独文件二、css兼容性处理三、压缩css四、js语法检查五、js兼容性处理六、js压缩七、html压缩八、生产环境配置...

文章目录前言一、打包图片资源时问题1：问题2：二、启动devServer指令更改为：npx webpack serve三、前言  最近跟着视频想详细学一下webpack，因为我下载的是最新版，webpack5，视频里是webpack4，难免遇到一些视频里没问题我这里报错的情况，现总结一下。一、打包图片资源时问题1：在 output 加上 publicPath:’./’，否则会报错，应该是版本问题publicPath:'./'问题2：下面这个问题用webpack版本5不会出现，应该是被解

一、打包样式资源1. 创建文件less文件：#title { color: #fff;}css文件：html, body{ margin: 0; padding: 0; height: 100%; background-color: pink;}index.js文件：// 引入样式资源import './index.css';import './index.less';2.关于 webpack.config.js，配置webpackwebpack.co

  距离上次学习webpack已经几个月了，上次只是简单看了个视频，很短，也不细，所以打算把尚硅谷2020最新版Webpack视频看一遍，巩固完善一下知识点。感兴趣的可以去看我的博客webpack 基本概念1. 初始化package.jsonnpm init2. 下载并安装webpack  上次学webpack安装的是 3.5.3 版本的，这次下载个最新版本试试。（再次下载会自动覆盖之前版本）npm install webpack webpack-cli -gnpm install webp

1. 全局安装 webpacknpm install webpack -g  网上有人说 webpack 4.0以上版本坑比较多，所以我安装了3.5.3版本的。npm install webpack@3.5.3 -g2. 创建空文件夹3. npm init -y 下载 package.jsonnpm init -y4. 局部安装 webpacknpm install webpack@3。5.3 --save-dev5.在文件夹下创建webpack.config.js文件,并配置，如

  今天无意看到电脑上有个 webpack 的小视频，就学了学。虽然杂音很大，讲解员中间也卡了几次，但总归让我对 webpack 有了些简单的了解。  想着还是先把 webpack 的基本概念搞明白点，所以第一篇博客就先总结一下概念吧。什么是 webpack  根据 webpack 中文网所说可知，webpack 本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency gr