zwkkkk1的博客

此系列更多的是个人对环境构建的一些记录，纯属个人的自娱自乐顺便做个分享，可以当做一个 React 的入门练习。文末tip：–save 与 --save-dev 区别**注：**需要注意的是此类讲步骤的文章由于第三方库的升级更新，具有一定的时限性，仅做参考。本人也会不定期更新最新的一些步骤和新的坑吧~目标命令行键入 npm start，访问 localhost:8080 可以访问到一个 ...

webpack 编译图片配置通过翻阅官方手册，我们发现可以借助 url-loader 或是 file-loader完成对 webpack 编译图片的配置。下面我先分别介绍两种 loader 的配置方法(大家按需求选择其一)，然后再简单介绍下两者的区别。url-loader 配置说明npm install file-loader url-loader -Durl-loader 依赖于 f...

1. ant-design 引入样式的几种方式1.1 全局引用js代码引入 ant-design 的 Button 组件import React, { Component } from 'react';import Button from 'antd/lib/button';import './App.css';class App extends Component { rend...

官方手册传送门 官方对devtool配置的定义很简单：选择一种 source map 格式来增强调试过程，不同的值会明显影响到构建build和重新构建rebuild的速度。不过，什么是source map，官方用提供了许多种的source map，其中的区别是什么，我们在开发中应该怎么选择，都是我们要学习的。1. 什么是 source map现在的前端代码会通过babel编译或者各类的...

今天在研究 webpack-dev-server 配置 host 时，看到手册中这样的一句话：指定使用一个 host，默认是 localhost，如果你希望服务器外部可访问，制定如下:host: "0.0.0.0"不过我这样设置后，同样能够在本地通过 localhost 访问到，不禁想要掰一掰两者的区别，在这里做个总结原因每个主机都可能有多个 ip 地址，比如多个网卡或多 ip，1...

  这是今天自己随便鼓捣 React-Router 的官方 demo 所遇到的问题，具体表现是：'/' 根节点 Home 显示无误，不过其他任何路由 例如 /detail，均显示 Cannot GET /detail。在我反复确认 js 代码与官方给出的代码一致后，我开始从 webpack 寻找答案。果然很快，我就找到类似的问题：React-router v4 - cannot GET u...

首先，请确认错误不是由语法错误造成的。在排除语法错误后，这一问题产生的原因很有可能是 webpack 的 loader 顺序设置错误。解决方案首先要确认下面的扩展有没有安装好npm i sass-loader node-sass postcss-loader autoprefixercss loader 的配置生产环境{ test: /\.css$/, use: Ext...

  这算是第一次实打实遇到跨域问题，之前做的东西都是用后台MVC框架进行渲染前端页面，加上之前准备面试题都只是知道个大概是个什么东西，这才在这次的前后端分离练习中遇到了这个问题。 具体啥是跨域问题，为了不喧宾夺主，这里不进行介绍，有兴趣的可以看看下面的两篇文章： 浏览器同源政策及其规避方法 前后端分离跨域问题解决方案还有，项目是要使用 webpack 和 webpack....

  今天在搞项目的时候，想要在React项目中fetch本地的json文件却一直报404。  网上的解决方案，差不多说地址都是相对于首页index.html而言，所以将json数据放在相对index.html上就好了。  可是鼓捣了个把小时还是没有解决问题。据我观察，网上的解决方案都是基于 create-react-app 的项目，而我的项目是自己集成的环境。  为了验证网上的解决方案...

webpack 中的模块路径是非常好用的特性，然而有时候我们也想在CSS、SCSS中用到模块路径却一直会提示错误找不到文件，下面直接上代码和解决方案。示例代码首先我们在 webpack.config.js 中设置const path = require("path");module.exports = { //其他的配置就省略了 ..., reso...

webpack4 配置 postcss-loader 和 autoprefixer 插件npm install postcss-loader autoprefixer --save-devwebpack.config.jsmodule.exports = { module: { rules: [ { ...