摘要：
webpack的插件都是通过npm去安装的，这种是使用外部插件；webpack本身也是有插件的，是通过new webpack.**来实现的 new webpack.DllReferencePlugin（执行引导文件）和new webpack.DllPlugin（设置引导文件）这两个是内置插件 1> 阅读全文
摘要：
tree shaking（树摇）是代码中的一种技术实现 我们现在实际工作中遇到的一个问题之一就是共享库的数量问题。从简单的自定义的库，到企业级的标准库，其实都是技术债务，其中最大的问题就是所有的应用程序或者模块，都在导入这些库，而实际上每一个模块本身只用到了其中的一小部分 tree shaking就 阅读全文
摘要：
module的异步加载模块就是懒加载， 懒加载就是固定条件下在进行服务器的请求，这样的话页面初始化请求比较快，首屏优化比较好 懒加载 webpack.config.js文件 module.exports = { entry: "./src/a.js", } 使用a.js文件向b.js文件发送请求 下 阅读全文
摘要：
目录结构： 配置splitChunks的时候，将所有的第三方库都打包到一个chunk模块中了，这样有一个问题，每一次重新编译的时候都会进行一次打包，这样如果我们引入的库特别的多，每一次打包的代价会特别大 a.js文件和b.js文件内容： import { $ } from "jquery" cons 阅读全文
摘要：
可以进行代码分隔的有两种，一种是多入口，几个入口会生成几个chunk；另一种是异步加载，每一个异步加载就会生成一个chunk； webpack打包如果是多个入口，并且引入同一个库，会如何工作？ a.js文件 import {$} from "jquery" console.log("a文件的jque 阅读全文
摘要：
缓存 缓存就是读取计算机内存中的文件，作用就是提高代码的性能。 目录结构 index.js文件 import './index.css'; import {a} from "../src/js/a.js" console.log(a,'a'); 此时进行webpack打包 第一次请求服务器地址127 阅读全文
摘要：
HMR热替换 HMR的配置只适用于开发环境，因为生产环境没有devServer 目录结构： 之前使用的开发环境，如果修改了其中一个文件的代码，保存之后所有的文件都会进行一次重新编译，比如我们修改了css代码，但是js文件没有进行修改，但是保存之后，js文件也会重新进行编译 index.html <! 阅读全文
摘要：
当webpack进行打包的时候，可能会遇到错误和警告信息，那么此时信息的位置很重要。 比如我们一共有a.js、b.js两个文件，通过webpack后会打包到build.js文件中。此时a.js文件中有错误信息，但是提示信息会在build.js文件中输出，并且输出结果是通过打包编译甚至是压缩后的结果， 阅读全文
摘要：
目录结构： // 开发服务器环境 devServer: { // 运行代码的目录 contentBase: resolve(__dirname, "build"), // 端口号 port: 3000, // 自动打开浏览器 open: true }, 1> host域名的配置 host: "127 阅读全文
摘要：
1> alias的配置 alias参数是一个对象，内部表示要设置的别名，一般是绝对路径的别名 resolve: { alias: { // 别名的设置 "@": resolve(__dirname, "./src") } }, @就是别名，此时可以替代src文件夹 比如b.js文件的引入c.js，使 阅读全文
摘要：
module的详细配置 module中的rules的详细配置项 module: { rules: [ { // 正则匹配文件类型 test: /\.css$/, // 使用loader名称，单个loader，和use属性互斥使用 loaser:"css-loader", // use是一个数组，内部 阅读全文
摘要：
output的详细配置 目录结构： 1> filename的配置 filename指的是出口文件的名称 // 出口文件 output: { // 出口文件名称 filename: "build.js", // 智能合并路径，绝对路径 path: resolve(__dirname,'build') 阅读全文
摘要：
官网地址: https://webpack.docschina.org/configuration/entry-context/ entry的详细配置 目录结构 entry入口可以有多种形式，这种为字符串形式 entry: "./src/index.js", 此时代表webpack的入口文件数量为1 阅读全文
摘要：
在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断或者设置生产环境或开发环境的依据 生产环境没有dev 阅读全文
摘要：
devServer指的是用webpack开发服务器环境，需要注意的是devServer的配置只能在development（开发环境中） 安装依赖 npm install webpack-dev-server -D webpack.comfig.js const { resolve } = requi 阅读全文
摘要：
在配置webpack的时候，没有实时编译，每次修改的时候，都需要重新执行webpack命令。这样效率很低 此时可以通过设置watch属性为true，表示实时编译 const { resolve } = require("path"); module.exports = { // 入口文件 entry 阅读全文
摘要：
目录文件： 打包配置CSS资源 此时只配置了html的plugin和css的loader。 在index.css中引入图片 webpack.config.js文件 const { resolve } = require("path"); const HtmlWebpackPlugin = requi 阅读全文
摘要：
JS文件的压缩 index.js function add(a, b) { return a + b; } console.log(add(1, 2)); 此时进行webpack打包 打包后的build/build.js HTML文件的压缩 HTML文件的压缩是在html-webpack-plugi 阅读全文
摘要：
ES6的语法兼容 ES6的语法兼容，低版本浏览器是不识别的，比如IE8以下，如果使用webpack进行打包js文件，是不会进行翻译的，使用babel会翻译ES6的语法 我们在index.js文件中使用es6语法写一个函数 const fun = (a, b) => a + b; console.lo 阅读全文
摘要：
style-loader、css-loader、less-loader都是基础配置，常用配置指的是按需配置，需要使用的时候再进行的配置 目录结构： 安装依赖 npm install mini-css-extract-plugin -D webpack.config.js文件 const {resol 阅读全文