create-react-app is a very convenient plug-in for building react applications. It helps you directly configure many commonly used modules such as react, webpack, webpack-devserver, babel, eslint, fetch, css-loader, etc., and these configurations It was hidden from the beginning.
npm install -g create-react-app install this plugin
Use the command create-react-app myapp to quickly create a react application with a default port of 3000. npm start can start webpack-devserver
In general, in order to be able to freely perform all configurations, npm eject will be executed to expose all project configuration files to developers, so that we can configure sass, less and other webpack configurations in webpack.confing.
In the template created by create-react-app, the css file is directly imported, but it does not work, and a react component is not implemented. Only the css file is used. Here we need to configure the css file package in webpack and turn on the module function. , And the format of the css style name of the module can be customized in the localIdentName in options. The configuration is as follows
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules:true,
localIdentName:"[name]__[local]___[hash:base64:5]",
},
},Please refer to my other blog about sass webpack packaging configuration.
