# webpack5
**Repository Path**: fu_960301328/webpack5
## Basic Information
- **Project Name**: webpack5
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-15
- **Last Updated**: 2021-06-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: webpack5测试目录
## README
一|| npm install webpack webpack-cli --save-dev
1.安装 pacKage.json "private": true, 输出 npx webpack npm run build, npm 二|| 分析工具 Webpack Chart :https://alexkuz.github.io/webpack-chart/
:https://chrisbateman.github.io/webpack-visualizer:webpack-visualizer/
webpack-bundle-analyzer
webpack bundle optimize helper: https://webpack.jakoblind.no/optimize/ bundle-stats:
三|| dependOn option 多个chunk 之间共享 四|| optimization.splitChunks
mini-css-extract-plugin: 用于将 CSS 从主应用程序中分离
预获取和预加载 (暂时没加)
preload chunk 会在父 chunk 加载时,以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
preload chunk 具有中等优先级,并立即下载。prefetch chunk 在浏览器闲置时下载。
preload chunk 会在父 chunk 中立即请求,用于当下时刻。prefetch chunk 会用于未来的某个时刻。
浏览器支持程度不同
五||创建libraies library: { name: 'webpackNumbers', type: 'umd', }, CommonJS const webpackNumbers = require('webpack-numbers'); // ... webpackNumbers.wordToNum('Two');
AMD
require(['webpackNumbers'], function (webpackNumbers) {
// ...
webpackNumbers.wordToNum('Two');
});
script tag
...
外部化 **
六|| 加载css 抽离 并压缩 npm install --save-dev style-loader css-loader 生产环境下 进行压缩css https://webpack.docschina.org/plugins/mini-css-extract-plugin/#minimizing-for-production cnpm install mini-css-extract-plugin --save-dev css-minimizer-webpack-plugin https://webpack.docschina.org/plugins/mini-css-extract-plugin/#minimizing-for-production 提取所有的 CSS 到一个文件中 :optimization.splitChunks.cacheGroups
使用字体文件 比如 fontawesome
加载数据 npm install --save-dev csv-loader xml-loader
管理输出 npm install --save-dev html-webpack-plugin
长效缓存 ** 通过 WebpackManifestPlugin 插件,可以将 manifest 数据提取为一个容易使用的 json 文件。 我们不会在此展示一个如何在项目中使用此插件的完整示例,你可以在 manifest 概念页面深入阅读,以及在 缓存 指南中,了解它与长效缓存有何关系。
缓存 提取引导模板(extracting boilerplate)
环境变量
1.将module.exports 变成一个函数 命令 :// npx webpack --env goal=local --env production --progress 减少 resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles 中条目数量,因为他们会增加文件系统调用的次数。
小即是快(smaller = faster)
减少编译结果的整体大小,以提高构建性能。尽量保持 chunk 体积小。
使用数量更少/体积更小的 library。
在多页面应用程序中使用 SplitChunksPlugin。
在多页面应用程序中使用 SplitChunksPlugin ,并开启 async 模式。
移除未引用代码。
只编译你当前正在开发的那些代码。**
按需加载 (https://webpack.docschina.org/guides/code-splitting/#dynamic-imports)?
安装 node_modules/.bin/webpack npm v5.2.0 或更高版本,则可以运行 npx webpack 来执行
webpack 和 TypeScript 进行集成
npm install --save-dev typescript ts-loader
typescript 可以运行 运行过程中会报错 报错内容如下: { E:\项目模板\webpack5\node_modules_html-webpack-plugin@5.3.1@html-webpack-plugin\index.js(701,9) TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. }
mode api
安装sass npm install sass-loader sass webpack --save-dev
enrtry 高级用法 //每个入口使用多种文件类型 entry: { index: './src/index.js', account: ['./src/account.js', './src/account.scss'], },
安装vue cnpm i -S vue vue-router cnpm i -D vue-template-compiler vue-loader
//引入webpack-merge插件进行合并 开发环境的需求:
模块热更新 (本地开启服务,实时更新) sourceMap (方便打包调试) 接口代理 (配置proxyTable解决开发环境中的跨域问题)
代码规范检查 (代码规范检查工具)
'webpack-dev-server' 不是内部或外部命令
npx webpack serve
npm install --save-dev webpack-dev-server
npm start :"start": "webpack serve --open", //继续 https://webpack.docschina.org/guides/development/#using-webpack-dev-server
clean-webpack-plugin 插件 已经安装
Error: Cannot find module 'webpack-cli/bin/config-yargs' Require stack: 问题待解决 : https://www.cnblogs.com/fsg6/p/14117791.html cnpm uninstall webpack-cli npm install webpack-cli@3 -D 提示:peerDependencies WARNING webpack-cli@3 requires a peer of webpack@4.x.x but webpack@5.38.1 was installed