# 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