首先，先不直接上正题的内容，我们先来看一个情况，修改 webpack 的配置文件为生产模式 production： 然后进行打包，查看打包之后的 JS 代码发现是进行压缩处理过的，这个原理在之前的文章当中已经讲解过了，参考：
原创
2021-11-14 00:39:00
250阅读
webpack代码压缩 js压缩 css压缩 html压缩 js压缩 webpack4内置了uglifyjs-webpack-plugin,在生产模式默认开启这个插件 所以我们默认打包的js文件以及是压缩过的 当然我们也可以手动安装一下这个插件并且手动设置一个参数 去做一些并行压缩之类的事情 css ...
转载
2021-09-24 00:33:00
1505阅读
2评论
压缩css 需要npm下载 css-minimizer-webpack-plugin const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssE ...
转载
2021-10-22 07:32:00
106阅读
2评论
Terser介绍和安装 命令行使用Terser Compress和Mangle的options Terser在webpack中配置 CSS的压缩 index.js import {sum, mul} from "./math"; import _ from "lodash"; console.log
转载
2021-03-16 21:10:00
311阅读
2评论
压缩css 需要npm下载 optimize-css-assets-webpack-plugin 在plugins中 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin ...
转载
2021-10-21 20:37:00
41阅读
2评论
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 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。 Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。 这
原创
2022-07-07 10:45:41
386阅读
初始化：npm init -y安装webpacknpm install webpack webpack-cli --save-dev安装vuenpm i --save-dev vue vue-loader vue-template-compiler 安装css的插件npm install --save-dev style-loader css-loader...
原创
2021-07-05 13:48:48
481阅读
一、打包CSS代码由于Webpack默认只识别js代码，所以打包css代码需要其他一些东西来帮忙加载器css-loader：解析css代码加载器style-loader：把解析后的css代码插入到DOM步骤：1.准备css文件代码引入到src/login/index.js中（压缩转译处理等）2.下载css-loader和style-loader本地软件包3.配置webpack.config.js让
原创
精选
2024-01-05 14:54:37
709阅读
cnpm install webpack@^5.23.0 --save-dev cnpm i webpack-cli@^4.5.0 --save-dev cnpm i less-loader@6.0.0 --save-dev cnpm i style-loader --save-dev cnpm i
转载
2021-07-07 11:01:00
174阅读
2评论
1、编写src/css/main.css#app a{ display: inline-block; width: 150px; line-height: 30px; background-color: dodgerblue; col...
原创
2023-07-17 14:22:54
72阅读
Loaders cnpm install vue-loader@14 vue-template-compiler --save-dev webpack.config.js module: { rules: [{ test: /\.vue$/, use: ['vue-loader'] }], }, A
转载
2021-07-07 16:44:00
108阅读
Loaders cnpm install vue --save webpack.config.js resolve: { // 解决运行时报错 alias: { 'vue$': 'vue/dist/vue.esm.js' } } 使用 import Vue from "vue";
转载
2021-07-07 14:36:00
61阅读
css文件处理-准备工作 (以下项目配置都是基于上一篇webpack(4)的基础上) 在项目开发中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。 这里我们就在src目录中创建一个normal.css文件，代码如下： body{ background-color: aqua; }
原创
2021-07-13 11:08:12
1028阅读
1、安装插件 common.css为： flex.css为： app.js为： 4、执行编译&查看结果
转载
2017-09-15 10:49:00
175阅读
2评论
私有前缀postcss-loader(样式处理工具) autoprefixer(私有前缀的插件)npm install postcss-loader autoprefixer -D//postcss.config.jsmodule.exports = {plugins: [require('autoprefixer')
]
}复制代码//.browserslistrccover 99.5
转载
2021-01-24 20:35:30
235阅读
2评论
安装代码压缩插件npm install uglifyjs-webpack-plugin --save-dev在webpack.base.conf.js中配置/* * @Descri
原创
2023-05-19 15:26:04
1176阅读
图片压缩和合并 在企业开发中为了提升网页的访问速度, 我们除了会压缩 HTML/CSS/JS 以外, 还可以对网页上的图片进行压缩和合并, 压缩可以减少网页体积, 合并可以减少请求次数，压缩打包之后的图片，每次在打包图片之前, 我们可以通过配置 webpack 对打包的图片进行压缩, 以较少打包之后
原创
2021-11-16 13:44:00
1082阅读
推荐：《webpack学完这些就够了》
《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。
以下是本节正文：
压缩JS、CSS和HTML及图片
压缩js用terser-webpack-plugin，不在使用ugli
原创
2021-09-02 10:39:50
2068阅读
提取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阅读
