create-react-app是一个非常方便的搭建react应用的插件,它帮你直接配置好了许多常用的模块如react,webpack,webpack-devserver,babel,eslint,fetch,css-loader等,并且这些配置一开始时是被隐藏的。
npm install -g create-react-app 安装此插件
使用命令 create-react-app myapp 即可快速创建一个react应用默认端口为3000.npm start可以启动webpack-devserver
一般为了能够自由地进行所有配置都会执行npm eject 使项目的配置文件全部暴露给开发者,这样我们就可以在webpack.confing中配置sass,less等自己的webpack配置。
在create-react-app创建的模板中直接导入了css文件,然而不起作用,并没有实现一个react Component只使用那个css文件,这里我们需要在webpack中对css文件打包进行配置,将modules功能打开,并且可以在options中的localIdentName中自定义模块css样式名字的格式。配置如下
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules:true,
localIdentName:"[name]__[local]___[hash:base64:5]",
},
},
关于sass的webpack打包配置请看我的其他博客。