MFWSCQ的博客

前言，最近一直在研究webpack相关的知识，我发现webpack打包单页面应用（使用react或者vue构建的项目）会很方便，教程也很多，但是像有时候我们写的很简单的多页面应用，并且不使用框架的情况下也想使用webpack对项目进行压缩，打包和转码，但是这期间会有很多疑惑，比如怎么处理各种文件，怎么把具有html结构的代码放到dist目录，并且怎么把html文件里的img:src图片导入到目标文...

首先安装babel-loader和babel核心库：npm install --save-dev babel-loader @babel/core然后在webpack.config.js中modules中配置babelmodule: { rules: [ { test: /\.js$/, exclude: /node_modules/...

起因：react官网推荐使用create-react-app来构建react应用，对于学习react的SPA单页应用开发是很不错的选择，最爽的体验应该是可以一把梭，不需要自己慢慢配置省时省力。但是如果要更改其中的配置项还得安装react-app-rewired并且由于react-app-rewired@2.x版本关系，还得安装customize-cra。emmmm然后我就不乐意了，觉得还是直接自...

当然你可以用create-react-app一把梭来配置antd，但是我更倾向于使用webpack来配置。首先使用npm安装antd：$ npm install antd --save安装完成之后就可以引入相应的组件和组件样式示例import { DatePicker } from 'antd';ReactDOM.render(<DatePicker />, ...

我们开发react的时候通常会使用到的css Modules，但是我们在如果全局配置了css Modules了以后，antd的css代码也会被改变，然后组件就会出错。解决方式：配置两次css匹配项，因为我们的antd文件资源在node_modules，而我们的普通文件不在node_module中。所以我们在匹配文件的时候，如果是antd的文件就是用include:/node_modules/然...

自己配置webpack开发react+react-router项目时，路由匹配出现问题，定位到是webpack配置的问题。就以react-router中的官方示例作为例子这个例子中路由默认是Home，当点击About时，进入/about的路由：但是当自己光标在地址栏按下enter键或者刷新页面的时候，或者手动输入地址栏的/about后，就出现了请求不到资源的提示：出现这...