17902的博客

目录1 HMR2 source-map3 oneOf4 缓存5 tree shaking6 code split7 lazy loading8 pwa9 多进程打包10 externals11 dll1 HMR创建文件HMR: hot module replacement 热模块替换 / 模块热替换作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度样式文件：可以使用HMR功能：因为style-loader内部实现了~js文件：默认不能使用HMR功能 --

目录1、提取 css 成单独文件2、css 兼容性处理3、压缩 css4、js 语法检查5、js 兼容性处理6、js 压缩7、HTML 压缩8、生产环境配置1、提取 css 成单独文件下载安装包下载插件npm install --save-dev mini-css-extract-plugin修改配置文件const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');

目录1、创建配置文件2、打包样式资源3、打包 HTML 资源4、打包图片资源5、打包其他资源6、devserver7、开发环境配置1、创建配置文件创建文件 webpack.config.js配置内容如下const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。module.s exports = { entry: './src/js/ index .js', // 入口文件 output: { // 输出配置 filen

1、初始化配置初始化 package.json输入指令:npm init下载并安装 webpack输入指令:npm install webpack webpack-cli -gnpm install webpack webpack-cli -D2、编译打包应用创建文件运行指令开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development功能：webpack 能够编译打包 js 和 json 文件，并且

1、webpack 是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。2、 webpack 五个核心概念Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。Output输出(Output)指示 webpack