webpack
文章平均质量分 76
Lkkkkkkg
这个作者很懒,什么都没留下…
展开
-
webpack学习(十一):构建多页面应用
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完压缩分离css : https://blog.csdn.net/qq593249106/article/details/84933978先前单页面目录结构:|- /dist |- /css |- style.css //分离出来的css文件 |- bundle.js...原创 2018-12-10 02:04:47 · 492 阅读 · 0 评论 -
webpack学习(十二):多页面提取公共部分(js&css)
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完多页面 : https://blog.csdn.net/qq593249106/article/details/84933978使用SplitChunksPluginThe CommonsChunkPlugin 已经从 webpack v4 legato 中移除, webpack 4...原创 2018-12-10 12:13:10 · 6237 阅读 · 0 评论 -
webpack学习(十三):react配置热替换
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完多页面提取公共部分js&css: https://blog.csdn.net/qq593249106/article/details/84937856使用 RectHotLoaderreact 提供了 react-hot-loader 插件来帮助 webpack 配置下 re...原创 2018-12-10 21:59:36 · 1115 阅读 · 0 评论 -
webpack学习(十四):生产环境搭建
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完react的热替换: https://blog.csdn.net/qq593249106/article/details/84947301当前 webpack.config.js目前使用的 webpack 配置文件包含了生产模式和开发模式,webpack.config.jscon...原创 2018-12-11 01:40:03 · 394 阅读 · 0 评论 -
webpack学习(十五):性能优化
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次完成了生产模式开发模式的分离: https://blog.csdn.net/qq593249106/article/details/84948648开发模式代码压缩开发环境下, 我们依然对代码的体积有一定的要求, 更小的体积可以让加载速度更快, 开发效率更高, 当然配置也相对简单, 只需...原创 2018-12-11 14:55:44 · 959 阅读 · 0 评论 -
webpack学习(十六):glob配置动态入口
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次分离生产模式和开发模式的配置: https://blog.csdn.net/qq593249106/article/details/84948648修改一下目录结构, 新建一个 config 文件夹 ,把 webpack 配置文件放进去方便管理:```c|- /dist |- ......原创 2018-12-12 09:38:34 · 2579 阅读 · 0 评论 -
webpack学习(十七):使用 process.env.NODE_ENV 区别生产模式和开发模式
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次分离生产模式和开发模式的配置: https://blog.csdn.net/qq593249106/article/details/84964816合并代码之前因为开发模式不需要压缩 css,将不同的压缩 rule 分别写在 webpack.prod.js 和 webpack.dev.js...原创 2018-12-12 11:59:09 · 7074 阅读 · 0 评论 -
编写一个 React 组件库(一):写一个简单的 Button 组件
这个项目基于webpack简单配置当前目录结构:|- /config //webpack配置项 |- webpack.common.js |- webpack.dev.js |- webpack.prod.js|- /dist //出口文件 |- ......|- /node_modules|- /src //入口文件 |- components //组件 |-...原创 2018-12-28 18:32:13 · 3676 阅读 · 0 评论 -
编写一个 React 组件库(二):提取公用 defaultProps
上一次编写了一个简单的 Button 组件:https://blog.csdn.net/qq593249106/article/details/85319295当前目录结构|- /config //webpack配置项 |- ......|- /dist //出口文件 |- ......|- /node_modules|- /src //入口文件 |- components ...原创 2018-12-29 11:15:54 · 944 阅读 · 0 评论 -
webpack学习(十):分离压缩css
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完 sass: https://blog.csdn.net/qq593249106/article/details/84933362使用ExtractTextWebpackPlugin它会将所有的入口 chunk(entry chunks)中引用的 *.css, 移动到独立分离的 CS...原创 2018-12-09 23:49:42 · 758 阅读 · 0 评论 -
webpack学习(九):配置sass
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完react: https://blog.csdn.net/qq593249106/article/details/84928595安装sass 是预编译语言, 浏览器无法直接识别, 需要进行编译成 css 文件, 所以编译 sass 需要安装 sass-loader , sass-l...原创 2018-12-09 22:40:09 · 1130 阅读 · 0 评论 -
webpack学习(十七):缓存
demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次使用 process.env.NODE_ENV 区别生产模式和开发模式: https://blog.csdn.net/qq593249106/article/details/84970525关于缓存我们使用 webpack 来打包我们的模块化后的应用程序,webpack 会生成一个可部署的...原创 2018-12-12 14:59:47 · 341 阅读 · 0 评论 -
webpack学习(一):初步配置webpack
安装先创建一个目录demo01, 初始化npm, 再安装webpack和webpack-cli(如果使用 webpack 4+ 版本,你还需要安装 CLI)mkdir demo01 //创建一个目录demo01cd demo01 //进入demo01npm -init -y //初始化npm, -y代表参数全部默认npm install webpack webpack-cli --sav...原创 2018-12-08 15:33:01 · 791 阅读 · 2 评论 -
webpack学习(二):配置加载css, 图片, 字体, 数据(JSON, XML, CSV)等资源文件
webpack初步配置参照 https://blog.csdn.net/qq593249106/article/details/84892069demo地址: https://github.com/Lkkkkkkg/react-demo配置css文件webpack 视所有文件都为模块, css , 图片, 字体, 数据等静态资源都会打包进 js 文件, 所以会需要用到 loader 文件, ...原创 2018-12-08 17:37:13 · 998 阅读 · 0 评论 -
webpack学习(三):配置HtmlWebpackPlugin
webpack初步配置参照 https://blog.csdn.net/qq593249106/article/details/84892069demo地址: https://github.com/Lkkkkkkg/react-demo当前目录结构:|- /dist //用于放打包后文件的文件夹 |- bundle.js //出口文件 |- index.html //模板文件|- ...原创 2018-12-08 22:38:26 · 676 阅读 · 0 评论 -
webpack学习(四):配置CleanWebpackPlugin
demo地址: https://github.com/Lkkkkkkg/react-demo上次配置HtmlWebpackPlugin: https://blog.csdn.net/qq593249106/article/details/84900169继上次配置完HtmlWebpackPlugin之后, 发现 dist 目录下产生了很多个 bundle.js 文件:当前目录结构:|- /...原创 2018-12-09 00:34:21 · 2088 阅读 · 0 评论 -
webpack学习(五):使用source map
demo地址: https://github.com/Lkkkkkkg/react-demo上次配置HtmlWebpackPlugin: https://blog.csdn.net/qq593249106/article/details/84901089继上次配置完HtmlWebpackPlugin之后, 现在开始解决追踪警告和错误代码的原始位置问题, 先看一下当前目录结构:|- /dist...原创 2018-12-09 11:00:54 · 640 阅读 · 0 评论 -
webpack学习(六):使用webpack-dev-serve
demo地址: https://github.com/Lkkkkkkg/react-demo上次使用source map功能: https://blog.csdn.net/qq593249106/article/details/84921131webpack-dev-server提供了一个简单的 web 服务器, 并且能够实时重新加载(live reloading), 也就是启动了 webpa...原创 2018-12-09 11:29:03 · 2952 阅读 · 0 评论 -
webpack学习(七):启用 HMR(模块热替换)
demo地址: https://github.com/Lkkkkkkg/react-demo上次使用 webpack-dev-serve : https://blog.csdn.net/qq593249106/article/details/84922572当前目录结构 :|- /dist //用于放打包后文件的文件夹 |- app.bundle.js //出口文件 |- print...原创 2018-12-09 15:38:56 · 4724 阅读 · 0 评论 -
webpack学习(八):配置react
demo地址: https://github.com/Lkkkkkkg/react-demo目前配置了 HtmlWebpackPlugin , CleanWebpackPlugin 插件, 使用了 source map 功能 , 和 webpack-dev-serve 服务器, 配置详情浏览 webpack 配置系列: https://blog.csdn.net/qq593249106/arti...原创 2018-12-09 17:02:32 · 363 阅读 · 0 评论 -
编写一个 React 组件库(三):使用 PropTypes 进行类型检查
继上一次提取了公共 defaultProps :https://blog.csdn.net/qq593249106/article/details/85336111为了能通过类型检查错误,可以使用 React 内置的 PropTypes 来检查类型是否合法:列如 Button 组件的 props 属性:className:应该是 string 类型children:应该是任意类型的si...原创 2018-12-29 12:04:30 · 483 阅读 · 3 评论