茉莉蜜茶~~~

开发环境性能优化1、优化打包构建速度（1）HMR（热模块替换）构建的时候如果只有一个模块变化，那么只构建这一个模块，其他模块用缓存，极大提升构建速度，体验更好devServer:{hot:true}html （一般只有一个模块，不需要处理，开启热模块后，会存在问题，需要在入口处，引入html文件，eg：entry：[‘./src/index.js’,’./src/index.html’]）css（style-loader内部已经做了处理）js（需要自己配置,不能对入口文件做处理）//如果

错误 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

Automatic publicPath is not supported in this browser 错误解决方法：//在webpack.config.js文件中添加module.exports = { output: { publicPath: './' }}

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

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-

常用的样式资源主要是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

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

一、概念webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，通过入口将所有的依赖关系通过webpack器打包成静态资源，像css，js，png二、可以做的事情：代码转化（eg:把es6转化为es5，将less，scss转化为css)文件优化(eg:压缩代码体积，合并文件)代码分割(eg:多页面运用中，公共模块抽离，路由懒加载)模块合并(eg:多个模块合并成一个模块，按照功能分类)自动刷新(eg:启动本地服务，代码更新后，自动刷新页面，热更