![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 70
我叫张永宽@
你我山巅自相逢
展开
-
面试常问的webpack知识点
什么是webpack webpack是一个JavaScript静态模块打包工具 webpack里面一切文件皆是模块,通过loader转换文件,通过plugin注入钩子 最终输出有多个模块组合的文件,webpack专注构建模块化项目 webpack可以看做模块打包机:所做的事情 分析你的项目结构 找到JavaScript模块以及其他的一些浏览器不能直接运行的扩展语言(scss,TS) 将其打包为合适的格式以供浏览器使用 webpack的优点 专注于处理模..原创 2021-09-24 15:10:28 · 104 阅读 · 0 评论 -
webpack-03,开发服务器
下载包 yarn add webpack-dev-server@3.11.2 -D 配置自定义命令server scripts: { "build": "webpack", "serve": "webpack serve" } 运行命令-启动webpack开发服务器 yarn serve 或npm run serve webpack开发服务器配置 在webpack.config.js中添加服务器配置 module.expor...原创 2021-09-24 13:11:15 · 67 阅读 · 0 评论 -
webpack打包提取css到独立文件(图解)
案例目标 将打包后的js文件中的css样式,提取出来放到独立的文件当中 案例准备 目录准备 需要的安装包 npm ihtml-webpack-plugin -D npm imini-css-extract-plugin -D npm i css-loader -D npm istyle-loader -D 目录代码(内含注释) css...原创 2021-09-22 21:07:04 · 679 阅读 · 0 评论 -
webpack-01,概念,作用,配置,打包HTML
webpack基本概念和作用 基本概念 除了合并代码,还可以翻译和压缩代码 less/sass -> css ES6/7/8 --> ES5 html/css/js --> 压缩合并 现代JavaScript应用程序的静态模块打包器 静态: 文件资源(css,html,js) 模块: node环境,引入文件,遵守模块化语法 作用 静态模块打包器 能翻译和压缩代码 减少代码包体积,让浏览器更快速的打开网页 ..原创 2021-09-24 12:56:18 · 65 阅读 · 0 评论