webpack代码压缩 js压缩 css压缩 html压缩 js压缩 webpack4内置了uglifyjs-webpack-plugin,在生产模式默认开启这个插件 所以我们默认打包的js文件以及是压缩过的 当然我们也可以手动安装一下这个插件并且手动设置一个参数 去做一些并行压缩之类的事情 css ...
转载
2021-09-24 00:33:00
1505阅读
2评论
1.下载安装cnpm i image-webpack-loader -D2.配置 module:{ //配置一个rules(规则),rul
转载
2022-07-22 09:52:19
178阅读
安装代码压缩插件npm install uglifyjs-webpack-plugin --save-dev在webpack.base.conf.js中配置/* * @Descri
原创
2023-05-19 15:26:04
1176阅读
1、使用的插件 MiniCssExtractPlugin：https://webpack.js.org/plugins/mini-css-extract-plugin/#src/components/Sidebar/Sidebar.jsx 注意：在webapck4中使用的是MiniCssExtrac
转载
2018-12-17 14:22:00
398阅读
2评论
前言 上一篇文章我们使用webpack打包成功了，但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址，非常麻烦，所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创建一个js文件webpack.config，当期我们配置最简单的导入导出，代码如下： const p
原创
2021-07-13 11:08:53
2487阅读
图片压缩和合并 在企业开发中为了提升网页的访问速度, 我们除了会压缩 HTML/CSS/JS 以外, 还可以对网页上的图片进行压缩和合并, 压缩可以减少网页体积, 合并可以减少请求次数，压缩打包之后的图片，每次在打包图片之前, 我们可以通过配置 webpack 对打包的图片进行压缩, 以较少打包之后
原创
2021-11-16 13:44:00
1082阅读
一、引入Eslint安装相关工具包npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-importloader配置的核心写法module: { rules: [ { test: /\.js$/,
原创
2022-01-17 11:05:59
458阅读
一. 你需要准备什么
webpack v4.41.5
Node 12.14.0 LTS
关于webpack的介绍,大家可以移步webpack4.x - 初始webpack
二.前提条件
在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可
原创
2021-07-12 15:48:11
1415阅读
一、引入Eslint安装相关工具包npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-importloader配置的核心写法module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader', options: {
原创
2021-12-16 15:10:19
93阅读
增加插件 在 hand-webpck 文件夹下引入插件 less 在src 下新增 index.less index.less @nice-blue: #5b83ad; body { background: @nice-blue; } 在 webpack.config.js 配置使用的模块 let
转载
2020-03-21 23:06:00
101阅读
2评论
webpack 4 教程：https://blog.zfanw.com/webpack-tutorial/
原创
2022-05-05 15:04:02
223阅读
一.什么是webpack
关于webpack的介绍,下面的中文网站做了详细的介绍,请大家参考学习;webpack中文网
原创
2021-07-12 15:48:52
129阅读
1.新建一个webpack.config.js2.配置入口entry（所需打包的文件路径）3.配置出口output（1）path 指的是文件打包后的存放路径（2）path.resolve（）方法将路径或者路径片段的序列号处理成绝对路径（3）__dirname表示当前文件所在的目录的绝对路径（4）filename是打包后文件的名称...
原创
2022-01-16 10:32:00
663阅读
1.新建一个webpack.config.js2.配置入口entry（所需打包的文件路径）3.配置出口output（1）path 指的是文件打包后的存放路径（2）path.resolve（）方法将路径或者路径片段的序列号处理成绝对路径（3）__dirname表示当前文件所在的目录的绝对路径（4）filename是打包后文件的名称...
原创
2021-09-03 14:55:33
903阅读
目录一、认识webpack1.1 webpack数组形式1.2 webpackde 对象形式 一、认识webpack Webpack是一个现代的静态模块打包工具，它主要用于前端开发中的模块化打包和构建。通过Webpack,开发者可以将多个模块（包括JavaScript、CSS、图片等）进行打包，生
原创
2024-07-29 11:58:26
121阅读
推荐：《webpack学完这些就够了》
《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。
以下是本节正文：
压缩JS、CSS和HTML及图片
压缩js用terser-webpack-plugin，不在使用ugli
原创
2021-09-02 10:39:50
2068阅读
首先，先不直接上正题的内容，我们先来看一个情况，修改 webpack 的配置文件为生产模式 production： 然后进行打包，查看打包之后的 JS 代码发现是进行压缩处理过的，这个原理在之前的文章当中已经讲解过了，参考：
原创
2021-11-14 00:39:00
250阅读
提取css文件成单独文件： 1、下载插件：npm install mini-css-extract-plugin -D 2、使用插件：webpack.config.js ①module中使用loader时用 MiniCssExtractPlugin.loader 替代 style-loader ②p
原创
2021-07-13 16:13:32
262阅读
在讲解性能优化的方案之前，我们需要了解一下webpack的整个工作流程， 方案一：减少模块解析 也就是省略了构建chunk依赖模块的这几个步骤 如果没有loader对该模块进行处理，该模块的源码就是最终打包结果的代码。不对某个模块进行解析，可以缩短构建时间 哪些模块不需要解析？ 模块中无其他依赖 w ...
转载
2021-08-28 21:30:00
428阅读
2评论
执行npm init -y, 创建package.json 文件最基本的配置文件entry:入口文件output：出口，出口里面添地址，和导出的包的名字mode 是模式默认production，可以选择为development，也可noneproduction：生产模式：去掉debug代码，和未使用的方法函数模块，小体积,速度快development：开发模式：文件会大些，包含debu...
原创
2023-02-14 15:15:38
234阅读
