webpack修改title_记录一个从零配置起来的react+webpack项目

想做一个react项目&＃xff0c;然后一开始使用create-react-app创建项目&＃xff0c;然后发现修改其中的配置很是艰难&＃xff0c;于是干脆从npm init开始搭建项目环境&＃xff0c;踩了不少坑&＃xff0c;在这里记录分享一下我的配置。

先npm init后项目文件夹里只有package.json文件&＃xff0c;然后通过cnpm安装react&＃xff0c;webpack等包。

最终能跑起来的项目如图&＃xff1a;

项目目录&＃xff1a;

package.json&＃xff1a;

其中比较关键的是脚本命令的设置&＃xff0c;用到的包也可以参考一下

然后是.babelrc&＃xff1a;

注意这里配置的名字&＃xff0c;是跟我安的包对应的

然后我想让项目的名字和版本号随着我的更新而在显示上也更新&＃xff0c;于是定义了一个常量文件constants.js&＃xff0c;取到package.json里的项目名称和版本号并导出&＃xff0c;之后用到的别的常量也可放在里面。

怎么使用呢&＃xff1f;

在一开始运行的webpack.base.js文件中引入&＃xff0c;配置在HtmlWebpackPlugin插件的title中&＃xff0c;然后在ejs模板的title标签里插入就ok&＃xff0c;效果&＃xff1a;

最后再说一下css-module的使用&＃xff1a;

在webpack配置文件中配置开启&＃xff0c;注意这个只需要在css-loader中配置参数即可&＃xff0c;不需要另外下载插件啦&＃xff01;

css文件就是正常的css样式&＃xff0c;然后可以看看怎么用的&＃xff1a;

有需要细节参考的话可以去我的github里clone一份&＃xff1a;