肖帅的博客

webpack优化-source-mapsource-map介绍：source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-mapsource-map：外部 错误代码准确信息 和 源代码的错误位置inlin...

webpack性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR优化代码调试source-map生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包externalsdll优化代码运行的性能缓存(hash-chunkhash-contenthash)tree shakingcode spli...

webpack生产环境配置文件webpack.config.jsconst { resolve } = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const OptimizeCssAssetsWebpackPlugin = require('optimize-css-ass...

webpack生产环境-Html压缩1，创建文件2，修改配置文件const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { fil...

js压缩1,创建文件2，修改webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { file...

js兼容性处理babel的使用1，创建文件2，下载安装包npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js3，修改配置文件webpack.config.jsconst { resolve } = require('path');const HtmlWeb...

js语法检查eslint1，创建文件2，下载安装包npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import3，修改配置文件webpack.config.jsconst { resolve } = require('path');const HtmlWebp...

压缩css1，创建文件2，下载安装包npm install --save-dev optimize-css-assets-webpack-plugin3，修改配置文件webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'...

css兼容性处理1，创建文件2，下载loadernpm install --save-dev postcss-loader postcss-preset-env3，修改配置文件webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-pl...

提取css为单独文件1，创建文件2，下载插件npm install --save-dev mini-css-extract-plugin3，修改配置文件webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');cons...

webpack-开发环境-devServe1，创建文件2，webpack.config.js配置const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', outp...

webpack-开发环境-打包其他资源1，创建文件2，修改webpack.config.js主要使用exclude关键字，代码如下const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src...

webpack-开发环境-打包图片资源创建文件及图片，如下所示下载安装loader包npm install --save-dev html-loader url-loader file-loader修改配置文件 webpack.config.js,代码如下const { resolve } = require('path');const HtmlWebpackPl...

webpack-开发环境-打包Html资源创建文件，如下图所示2，下载安装plugin包npm install --save-dev html-webpack-plugin3，修改配置文件 webpack.config.js/* loader: 1. 下载 2. 使用（配置loader） plugins: 1. 下载 2. 引入 3. 使用*/const {...

webpack开发环境基本配置1，创建配置文件1.1 创建文件webpack.config.js1.2 配置内容如下const {resolve} = require('path'); //node内置核心模块，用来处理路径问题module.exports ={ entry:''./src/js/index.js,//入口文件 output:{ filename:'./bu...

1.1 webpack是什么webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。在webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。它根据模块依赖关系进行静态分析，打包生成对应的静态资源（bundle）。1.2 webpack的5个核心概念1.2.1 Entry入口（Entry）指示webpa...