![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 92
亦是木子也是雨
一个记笔记的地方
展开
-
手动配置 webpack(三) 之性能优化
webpack 性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR(热模块替换)当我们修改某一个文件,但其它的文件都没有修改时,用 webpack 进行打包,会发现所有的 文件都会被重新打包。但是只修改某一个文件,却将所有的文件都打包,这样做反而是没有必要的。所以,我们就要做的是,那个文件进行了修改,再打包的时候只打印这个文件即可,所以我们就需要使用到 HMR(热模块替换)常见的文件有三种:html、js 和 csscss文件,可以使用 HMR,因为 s原创 2020-10-26 21:33:24 · 126 阅读 · 0 评论 -
手动配置webpack(二)之生成环境配置
生产环境配置文章目录生产环境配置1、提取 css 成单独文件2、css 兼容性处理3、压缩 css4、js 语法检查5、js 兼容性处理6、js 压缩处理7、html 压缩处理1、提取 css 成单独文件下载安装相关插件npm install --save-dev mini-css-extract-plugin修改配置文件const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports =原创 2020-10-24 21:47:12 · 128 阅读 · 0 评论 -
手动配置webpack(一)之开发环境配置
开发环境的基本配置1、初始化配置初始化 package.json文件npm init -y下载安装 webpack 和 webpack-cil:npm i webpack@4.32.2 webpack-cli@3.3.2 --sava-dev2、创建配置文件创建 webpack.config.js文件为这个文件进行简单的配置const { resolve } = require('path');module.exports = { extry: './src原创 2020-10-24 21:42:52 · 355 阅读 · 0 评论 -
webpack的简介
前端模块化webpack前端模块化打包工具webpack能让我们进行模块化开发,并且会帮助我们处理模块间的依赖关系不仅仅是js文件,css、图片、json文件在webpack中都会被当做模块来使用为了使webpack正常运行,必须依赖node环境node环境为了可以正常执行很多代码,必须其中包含各种依赖的包npm工具(node packages manager)和grunt/gulp...原创 2019-11-30 13:35:39 · 365 阅读 · 0 评论