![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 59
自己动手实现webpack的配置
Celester_best
不断积累,相信自己一定可以!!!
展开
-
chrome调试工具使用技巧汇总
命令菜单打开命名菜单的快捷键:ctrl+shift+p切换主题输入switch to dark theme,就可以切换成黑色主题;输入switch to light theme就可以切换到白色主题等。截屏Capture area screenshot:对鼠标拖动区域的截屏Capture full size screenshot:对整个屏幕的截屏Capture node screenshot:对node节点的截屏改变调试窗口的位置Dock to bot.原创 2022-05-07 23:42:34 · 2462 阅读 · 0 评论 -
webpack学习-PWA离线可访问技术
概念PWA:Progressive Web App。渐进式网络开发应用程序(离线可访问)ServiceWorkerPWA使用不使用PWA使用PWA原创 2022-01-01 07:10:19 · 952 阅读 · 0 评论 -
webpack-懒加载和预加载
正常加载为了看的方便,index.js中的代码非常简单console.log('index.js执行了')import { test } from './test.js'document.getElementById('btn-wrap').onclick = function () { test()}test.jsconsole.log('test.js执行了')export function test() { const value = 'hel.原创 2021-12-27 23:05:23 · 855 阅读 · 0 评论 -
webpack-code split代码分割
在前面的学习中,可以发现,js代码都打包成了一个文件。这样使得js文件很大,影响加载速度,我们希望能将文件进行分割,这样可以实现多个文件并行加载,速度更快,另外代码分割之后还可以实现按需加载等功能。代码分割方法一:通过入口文件进行代码分割项目里面有两个js文件(index.js,test.js),可以通过设置entry实现多个入口,从而打包生成多个js文件。 // 单入口 // entry:'./src/js/index.js', // 多入口 entr.原创 2021-12-23 23:50:36 · 1913 阅读 · 0 评论 -
webpack-tree shaking
介绍tree shaking的作用:去除无用代码,减少代码体积开启的前提:1、必须使用es6模块化2、在production环境中运行测试test.js中创建3个方法,并且test和test2方法在index.js中引用并使用,而test3没有地方使用console.log('test.js执行了')export function test() { const value = 'hello world' console.log('test value: ',原创 2021-12-22 08:15:19 · 359 阅读 · 0 评论 -
webpack-对loader加载的优化之oneOf
优化前各个loader的配置 rules: [ // 在rules中写详细的loader配置 // 打包css资源 { // 正则表达式,匹配那些文件,匹配以.css结尾的文件 test: /\.css$/, // 使用哪些loader进行处理 use: [...commonCssLoade原创 2021-12-20 22:38:08 · 572 阅读 · 0 评论 -
webpack:开发环境下调试代码-source-map
现在我们将代码故意写错一个地方,运行webpack命令,看浏览器报错情况不设置source-map可以看到报错的地方并没有为我们提供具体的位置。设置不同的source-mapsourse-map:一种提供源代码到构建后代码映射技术,如果构建后代码出错了,通过映射可以追踪源代码错误。设置source-map只需要在webpack.config.js中设置devtool即可设置devtool:'source-map'设置devtool:'source-map',执行webpa原创 2021-12-20 22:16:33 · 2114 阅读 · 0 评论 -
Webpack-热更新
先附上测试代码进行说明html文件<body> <div>webpack5学习</div> <!-- 注释 --> <div>html压缩</div> <div class="box1"></div> <div class="box2"></div> <div class="img-box1"></div>原创 2021-12-16 08:04:17 · 457 阅读 · 0 评论 -
webpack5-打包其他资源以及devServer的配置
webpack5打包其他资源其他资源:其他资源指一些不需要做任何处理(例如不需要压缩,优化等处理),只需要原封不动的输出,比如字体图标打包其他资源可以用file-loader其他资源应该怎么识别呢?我们可以使用exclude排除html、css、js、less等资源(这个根据实际项目进行排除),剩余的为其他资源。 // 打包其他资源(除了html,js,css,less等资源以外的资源) { // 使用exclu原创 2021-12-12 11:06:49 · 1133 阅读 · 0 评论 -
webpack4、webpack5-打包图片资源
打包css或者less等样式文件中的图片打包样式文件中的图片资源需要安装url-loader和file-loaderwebpack4的设置 { test: /\.(png|jpg|gif)$/, // 要使用多个loader用use数组,只使用一个loader可以直接用loader loader: 'url-loader', option...原创 2021-12-12 10:52:10 · 1010 阅读 · 0 评论 -
webpack4,webpack5-css,less样式文件的兼容
安装postcss-loader和postcss-preset-env两个库css文件的兼容性处理webpack4的样式兼容配置webpack.config.js中的配置 // 打包css资源 { // 正则表达式,匹配那些文件,匹配以.css结尾的文件 test: /\.css$/, // 使用哪些loader进行处理原创 2021-12-11 18:32:12 · 1280 阅读 · 4 评论 -
webpack5-打包css等样式资源,css等样式文件提取,css等样式文件压缩
打包css资源加载css资源需要安装style-loader,css-loader库配置如下: module: { rules: [ // 在rules中写详细的loader配置 // 打包css资源 { // 正则表达式,匹配那些文件,匹配以.css结尾的文件 test: /\.css$/, // 使用哪些原创 2021-12-11 17:52:15 · 2313 阅读 · 0 评论 -
webpack5-加载html资源以及html资源压缩
webpack5加载html资源加载html文件需要html-webpack-plugin插件安装html-webpack-plugin在webpack.config.js中引入html-webpack-plugin插件,const HtmlWebpackPlugin = require('html-webpack-plugin')并且创建html-webpack-plugin对象 // 插件 plugins: [ // 详细的plugins配置原创 2021-12-11 16:18:12 · 809 阅读 · 0 评论 -
webpack-5项核心概念的配置
在项目的根目录下创建webpack.config.js文件webpack5项核心概念的配置// 在nodejs中处理绝对路径需要使用path模块中的resolve,resolve是用来拼接绝对路径的方法const { resolve } = require('path')module.exports = { // 入口文件 entry: './src/index.js', output: { // 输出文件名 filename: 'bui原创 2021-12-11 15:41:09 · 207 阅读 · 0 评论 -
webpack初始化、安装及测试
初始化执行npm init命令初始化之后,文件夹中会自动生成一个package.json文件安装webpakc和webpack-cli全局安装执行npm install webpack webpack-cli -g命令npm install webpack webpack-cli -g本地安装执行npm install webpack webpack-cli -D命令安装之后会项目会自动生成node_modules和package-lock.json文件测试在项.原创 2021-12-11 15:23:42 · 470 阅读 · 2 评论 -
webpack基本介绍
Webpack是什么Webpack是一种前端资源构建工具,是一个静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。解释:Webpack会以入口文件为起点,将所有的依赖都记录好,形成一个依赖关系树状结构图。接着把所有的依赖代码都引进来形成一个chunk(翻译过来就叫代码块),再将这些代码都编译成浏览器能够识别原创 2021-12-11 15:03:55 · 340 阅读 · 0 评论