秋来九月八

介绍两个webpack非常实用的插件 CleanWebpackPlugin和CopyWebpackPlugin，CleanWebpackPlugin用来清理每一次编译打包的文件，每一次编译打包后，旧的打包文件将会自动清理，CopyWebpackPlugin用来复制那些不需要编译打包的文件

entry1、string --> ‘./src/index.js’，单入口打包形成一个 chunk。 输出一个 bundle 文件。此时 chunk 的名称默认是 main2、array --> [’./src/index.js’, ‘./src/add.js’]，多入口所有入口文件最终只会形成一个 chunk，输出出去只有一个 bundle 文件。（一般只用在 HMR 功能中让 html 热更新生效）3、object，多入口有几个入口文件就形成几个 chunk，输出几个 bun

externals 是用来解决不需要打包的库，避免打包后的体积过于庞大。在实际的开发中，很多库可以采用cdn的方式引入。比如jquery,并不需要通过node 安装jquery而是采用链接的方式直接引入 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>当然还有很多ui库 bootstrap或者element-ui 是可以通过cdn引入的。vue和react实际上都可以通过c

多进程打包：某个任务消耗时间较长会卡顿，多进程可以同一时间干多件事，效率更高。优点是提升打包速度，缺点是每个进程的开启和交流都会有开销（babel-loader消耗时间最久，所以使用thread-loader针对其进行优化）下载npm i thread-loader -D使用{ test: /\.js$/, exclude: /node_modules/, use: [ /* thread-loader会对其后面的loader（这里是babel-loader）

Webpack Code Splitting（Webpack 代码拆分）是一种将前端应用程序的代码分割成多个小块的技术，以提高性能和加载速度。通过将代码拆分成多个文件，你可以减少初始加载时间，因为只有在需要时才加载特定部分的代码。这有助于降低应用程序的初始加载时间，提高用户体验，并减轻服务器的负载。

这里介绍两类 webpack的缓存优化1、babel 缓存将 babel 处理后的资源缓存起来（哪里的 js 改变就更新哪里，其他 js 还是用之前缓存的资源），让第二次打包构建速度更快使用方式在webpack.config.js的babel-loaer，配置options中多加一个属性cacheDirectory: truerules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader

source-map：一种提供源代码到构建后代码的映射的技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）使用方式很简单在webpack.config.js配置中加上module.exports = {...devtool: 'eval-source-map'}devtool对应值的种类1、source-map：外部，错误代码准确信息 和 源代码的错误位置2、inline-source-map：内联，只生成一个内联 source-map，错误代码准确信息 和 源代码的错误位置3

webpack.config.jsconst { resolve } = require('path');/** 引入插件 */const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));/** 用于将样式文件单独提取出来 */ const MiniCssExtractPlugin = require('mini-css-extract-plugin');/** 用于管理当前的环境,development

eslint 自动检验代码是否规范的一种方式，如果有一点不符合代码规范的地方，就会在打包时报错。如果你不喜欢eslint这种粗暴的方式，可以使用prettier这个插件perttier插件介绍webpack使用eslint 需要安装 eslint eslint-loadernpm i eslint eslint-loader -Dairbnb(一个流行的eslint验证代码的风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-impor

在webpack生产环境中，对js和html需要有以下基本的处理步骤对js进行兼容性处理和压缩，对html进行压缩（html无法兼容性处理）1、js进行兼容性处理js兼容性处理就是将es6以上版本语法转为es5以下版本语法需要使用到babel-loader @babel/core @babel/preset-env安装基本js兼容(无法解决promise等)npm i babel-loader @babel/core @babel/preset-env -D高级js兼容按需加载（弥补上面

开发环境中，css样式文件与js文件合并再进入html文件。生产环境应该将css文件单独提取出来，避免加载的过程中，因js和css合并后加载的文件过大而产生延迟。生产环境的样式,还需要做进一步的兼容性处理和压缩处理。1、为了将css样式单独提取成文件，需要下载插件 mini-css-extract-pluginnpm i mini-css-extract-plugin -D如何使用 mini-css-extract-plugin先引入const MiniCssExtractPlugin =

const { resolve } = require('path');/** 引入插件 */const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));module.exports = { /** 输入 */ entry: './src/index.js', /** 输出 */ output: { /** 将js文件夹放到bundle/js文件夹下 */ filename: '

前端代码开发服务器，不需要每次都打包，才能预览最新的代码效果。除了之前的配置以外，需要使用到webpack-dev-server，确认安装cnpm i webpack-dev-server -Dwebpack.config.js配置const { resolve } = require('path');/** 引入插件 */const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));module.exp

webpack图片处理需要下载npm i file-loader html-loader url-loader -D文件目录less文件div { background-color: pink; color:#fff}.div1 { background-image: url(./成都画室1.png); width: 100px; height:100px; background-size: contain;}.div2 { background-imag

webpack处理html文件需要使用html-webpack-plugin插件webpack使用插件一般有三个步骤 1安装 2引入 3使用1 安装2 引入和使用引入使用require 语法 .const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));使用 HtmlWebpackPlugin 是一个构造函数，new一个实例对象即可new HtmlWebpackPlugin()const { res

前端开发中常见的样式文件包括 css less sass（scss）如果想用这三种类型的文件，需要在webpack配置文件中进行处理配置样式需要安装npm i css-loader style-loader -D配置less需要额外安装npm i less less-loader -D配置scss需要额外安装npm i node-sass sass-loader -D const { resolve } = require('path');module.exports = {

webpack 已经来到了 5.0，前端开发人员，不仅仅需要学习css，js和html，webpackj作为项目的构建工具，是十分重要的，不学习使用构建工具，永远只能活在别人搭建的框架下。让我们开启学习webpack的旅程。学习前置条件，你需要掌握node.js（了解大概就行）es6 会使用npm或者cnpm或者yarn第一步 安装工具安装最新的node node下载地址安装完成后运行 npm -v 检查是否安装成功使用node的npm 全局安装 webpack 和 webpack-cl