搭建博客网站填坑记录

Q1:compilation.mainTemplate.applyPluginsWaterfall is not a function

打开package.json文件查看得到webpack为4.x版本，所以会出现问题，也就是webpack3.x升级到4.x的问题，找度娘得到解决方案：yarn add webpack-contrib/html-webpack-plugin -D 实施之后发现不管用，索性直接将安装3.x版本的webpack，问题才得以解决。

Q2:使用antd框架的项目在网页中打开后页面有显示，但排版不正确

这个应该就是某些css文件没有作用到网页，可以想到应该是antd自带的css文件 解决方案： 新建.babelrc文件 使用 babel-plugin-import（推荐）。 // .babelrc or babel-loader option { "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // style: true 会加载 less 文件 ] } 注意：webpack 1 无需设置 libraryDirectory。

然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

// babel-plugin-import 会帮助你加载 JS 和 CSS import { DatePicker } from 'antd';

Q3:react本地执行npm run build打包之后，本地打开index.html文件，页面没有显示任何内容

打开开发者工具，发现也没有提示出现什么错误，只是提示You might need to use a local HTTP server (instead of file://) 解决方案; 引入路由的时候将BrowserRouter改成Hashrouter即可（或者不适用路由就没事了），即

import {
  HashRouter as Router
} from 'react-router-dom'
复制代码

这时打开通过文件形式打开index.html就可以看到页面有内容了。 还可以为项目增加一个node服务器，通过服务器来访问资源以及打开页面，这时就不用将Browserrouter改成HashRouter了。