DOM曼珠沙华的博客

1.entry 打包入口 有以下三种打包方式：单字符串、数组、对象 1. string --> './src/index.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 2. array --> ['./src/index.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 ...

优化配置概括 优化主要分为两个方面的配置：开发环境和生产环境 具体可以概括如下： # webapck性能优化 * 开发环境性能优化 * 生产环境性能优化 # 开发环境性能优化 * 优化打包构建速度 * HMR * 优化代码调试 * source-map # 生产环境性能优化 * 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * external * dll * 优化代码运行的性能 * 缓存(hash/chunkhash/contenth

下方的配置文件均为webpack.config.js文件 在配置完成后运行指令均为webpack，可查看打包产生的文件 1.提取css成单独文件 因为在一般情况下，js内引入的css文件，会被打包进出口js文件内，所以引入在编译的时候会到导致编译文件较大，速度慢的情况 所以将css单独打包出来，可以适当增加文件加载速度 需要下载插件 npm install --save-dev mini-css-extract-plugin 修改配置文件 const { resolve } = re

在查看内容之前可以先拉下全部项目的代码运行查看： 项目内容上传到了 码云 https://gitee.com/a2547944268/webpack_test上 基础配置 在项目内创建配置文件webpack.config.js 配置内容如下： const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。 module.exports = { entry: './src/js/index.js', // 入口文件 .

webpack是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

这个不是项目内的问题，只是练习发现的，使用 npx webpack-dev-server 命令启动：

webpack.config.js配置文件： entry:{ index:"./src/index", list:"./src/list", detail:"./src/detail" } new htmlWebpackPlugins({ title: "index.html", template: path.join(__dirname, "./src/index/index.html"), filename:"index.html", chunks:[index] }) 1.⽬录结构

官⽅⽹站：https://babeljs.io/ 中⽂⽹站：https://www.babeljs.cn/ Babel是JavaScript编译器，能将ES6代码转换成ES5代码，让我们开发过程中放⼼使⽤JS新特性⽽不⽤担⼼兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。 Babel在执⾏编译的过程中，会从项⽬根⽬录下的 .babelrc JSON⽂件中读取配置。没有该⽂件会从loader的options地⽅读取配置。 测试代码 //index.js const ar...

HMR配置 启动hmr，这里有添加热更新属性： devServer: { contentBase: "./dist", port: 8081, open: true, // 热替换 hotOnly: true, // 模块刷新，不会做页面刷新 }, 配置⽂件头部引⼊webpack //const path = require("path"); //const HtmlWebpackPlugin = require("html-web..

提升开发效率的利器 每次改完代码都需要重新打包⼀次，打开浏览器，刷新⼀次，很麻烦,我们可以安装使⽤webpackdevserver来改善这块的体验 安装 npm install webpack-dev-server -D 配置 修改下package.json "scripts": { "server": "webpack-dev-server" }, 在webpack.config.js配置，在原有基础上添加： devServer: { contentBase...

webppack是什么？ 官网地址：https://webpack.js.org/ webpack is a module bundler(模块打包⼯具) Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别 出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所 有的依赖打包到⼀个单独的⽂件中 是⼯程化、⾃动化思想在前端开发中的体现 安装 因为webpack是基于node.js的，所以需要先安装nodeJs， NodeJs https