webpack
文章平均质量分 69
大神乔伊
产品,技术,思考,成长
展开
-
webpack学习:多页配置
本文内容如下多页配置如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案多页配置module.exports = { entry: { //多入口 index:'./index.js', other:'./other.js' } output: { path: resolve(__dirname, '../dist'), filename: 'js/[name].[contenthas原创 2021-11-02 22:53:09 · 77 阅读 · 0 评论 -
webpack学习:区分模式打包
本文内容如下性能优化相关内容如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案区分模式打包根据开发环境或生产环境而使用不同的配置,因为有些配置是开发模式使用,有些是生产环境使用如何区分把配置分为3个文件,根据环境变量来结合:webpack.common.js(公共配置)入口文件出口文件module…webpack.dev.js(开发配置)devServeeslintsource-map…webpack.pro.js(生产配置)extern原创 2021-11-02 22:45:21 · 193 阅读 · 0 评论 -
webpack学习:性能优化
本文内容如下性能优化相关内容如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案性能优化两大方面一,开发环境性能优化优化: 构建速度,代码调试HMR热模块更新(代码调试)source-map(代码调试)oneOf(构建速度)缓存 (构建速度)二,生产环境性能优化优化: 减少请求,代码体积,加快请求速度缓存(减少请求)代码压缩(代码体积)tree-shaking摇树(代码体积)code-splitting代码分割(加快请求速度)lazy load原创 2021-11-02 00:00:59 · 264 阅读 · 0 评论 -
webpack学习:配置es6+,react,typescript,eslint
本文内容如下配置es6+,react,typescript,eslint如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案配置打包ES6+部分浏览器只认识es5的语法,如果要使用es6以上的语法,需要配置注意:在根目录新建 .babelrc,用于配置es6以上的语法兼容§,webpack会自动检测有没有 .babelrc 文件,如果有则按里面的配置加载,和写在module里的效果是一样的yarn add @babel/runtimeyarn add -D babel原创 2021-11-01 18:26:54 · 434 阅读 · 0 评论 -
webpack学习:配置开发服务器,css,图片,文件
本文内容如下webpack中的概念和文件结构如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案配置打包html在上一篇,已经配置过了,内容包括:自动引入JS,修改title,html代码压缩//安装:yarn add html-webpack-plugin//引入:const HtmlWebpackPlugin = require('html-webpack-plugin')//配置:module.exports = { mode: 'develo原创 2021-10-30 20:24:34 · 144 阅读 · 0 评论 -
webpack学习:概念及文件结构属性配置
本文内容如下webpack中的概念和文件结构如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案概念loader转换器,解决浏览器不认识的文件问题,浏览器不认识什么就配置什么,如css,图片,react,typescript等等如何使用:1.安装,2.无需导入,直接配置规则使用简单例子:正则表达式匹配到以 .css 结尾的文件,就用 css-loader 处理yarn add css-loadermodule.exports = { mode: 'd原创 2021-10-30 11:56:47 · 185 阅读 · 0 评论 -
webpack学习导航
前言浅蓝色的文字是超连接,点击前往相关主题学习资料官网bilibili教程基础介绍安装,基本使用进阶其他原创 2021-10-30 09:57:42 · 201 阅读 · 0 评论 -
webpack学习:介绍与安装,简单使用
本文内容如下webpack是什么? 如何使用?如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案webpack是什么why?前端快速发展,es6等语法浏览器跟不上,需要webpack做中间转换处理网站越大,静态资源越多,就要发起多次请求,需要webpack做性能优化处理各种各样的文件依赖关系,requirejs和webpack都可解决文件依赖关系解决图片问题:合并,压缩,精灵图,图片的base64编码what?一款编译打包的成熟工具,可以理解为"中间件原创 2021-10-30 09:56:34 · 114 阅读 · 0 评论