![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
茉莉蜜茶~~~
web前端工程师一枚(当阅读成为了习惯,知识也就变成了常识)
展开
-
webpack开发环境和生产环境性能优化
开发环境性能优化1、优化打包构建速度(1)HMR(热模块替换)构建的时候如果只有一个模块变化,那么只构建这一个模块,其他模块用缓存,极大提升构建速度,体验更好devServer:{hot:true}html (一般只有一个模块,不需要处理,开启热模块后,会存在问题,需要在入口处,引入html文件,eg:entry:[‘./src/index.js’,’./src/index.html’])css(style-loader内部已经做了处理)js(需要自己配置,不能对入口文件做处理)//如果原创 2020-12-13 22:26:36 · 390 阅读 · 0 评论 -
webpack5打包错误( Cannot find module ‘webpack-cli/bin/config-yargs)
错误 Error: Cannot find module 'webpack-cli/bin/config-yargs//paskage.json"devDependencies": { "webpack": "^5.2.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0"}解决://卸载当前的 webpack-cli npm uninstall webpack-cli//安装 webpack-cli原创 2020-12-08 20:29:26 · 499 阅读 · 0 评论 -
webpack5打包错误(Automatic publicPath is not supported in this browser )
Automatic publicPath is not supported in this browser 错误解决方法://在webpack.config.js文件中添加module.exports = { output: { publicPath: './' }}原创 2020-12-08 20:27:02 · 625 阅读 · 0 评论 -
webpack5生产环境基本配置
webpack.config.jsconst path = require('path')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');const htmlWebpackPlugin = require('html-webpack-plugin')c原创 2020-12-08 20:21:22 · 1634 阅读 · 0 评论 -
webpack5简单配置(样式,图片,字体,html)
webpack基本配置//package.json"devDependencies": { "css-loader": "^5.0.1", "file-loader": "^6.2.0", "html-loader": "^1.3.2", "html-webpack-plugin": "^4.5.0", "less": "^3.12.2", "less-loader": "^7.1.0", "sass": "^1.30.0", "sass-原创 2020-12-06 22:29:33 · 952 阅读 · 1 评论 -
webpack5样式css,less,sass,styus(三)
常用的样式资源主要是css、less、sass、styus1、处理css文件用到的loader主要是style-loader、css-loader2、处理less文件用到的loader主要是style-loader、css-loader、less-loader (需要安装less)3、处理sass文件用到的loader主要是style-loader、css-loader、sass-loader (需要安装sass)4、处理styus文件用到的loader主要是style-loader、css-loa原创 2020-12-03 17:37:31 · 1441 阅读 · 0 评论 -
webpack5基本配置及html-webpack-plugin和webpack-dev-server使用(二)
1、初始化 npm init,生成package.json文件2.安装 npm webpack webpak-cli html --save-dev( --save-dev开发过程中需要使用的一些文件,在项目最终运行时是不需要的,简写-D,将模块名和版本号添加到devDependencies部分)(–save 在线上环境运行时会将包安装,将模块名和版本号添加到dependencies部分)3.创建webpack.config.js3.1基本配置const path = require('pat原创 2020-12-03 17:12:46 · 1937 阅读 · 0 评论 -
认识webpack5(一)
一、概念webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),通过入口将所有的依赖关系通过webpack器打包成静态资源,像css,js,png二、可以做的事情:代码转化(eg:把es6转化为es5,将less,scss转化为css)文件优化(eg:压缩代码体积,合并文件)代码分割(eg:多页面运用中,公共模块抽离,路由懒加载)模块合并(eg:多个模块合并成一个模块,按照功能分类)自动刷新(eg:启动本地服务,代码更新后,自动刷新页面,热更原创 2020-12-03 16:59:32 · 263 阅读 · 0 评论