1.使用create-react-app命令创建react项目，生成的项目里没有config等配置文件，运行npm run eject命令来生成配置文件，报了下面的错：
2.PNG
原因是脚手架里有.gitgnore文件，但是却没有本地仓库，删掉.git文件夹或者初始化个本地仓库就可以了
2.修改默认路径
config文件夹下webpack.config.js文件，在alias下添加
alias:{
...
'@': path.resolve(__dirname, '../src')
}
3.图片等静态文件引入方法
/**
* 两种引入方式
* 1.import 然后将变量写入
* 2.require 这种方法只能直接引入一个字符串，不可以放变量。
*
* require引入，在css里没问题，但是在js里写入的时候，webpack会把它当成字符串来打包，可能会出现打包完毕图片找不到的问题
* import是es6的写法，推荐使用
*/
import a0 from '@/assets/img/a-0.png'
import a1 from '@/assets/img/a-1.png'
import a2 from '@/assets/img/a-2.png'
import a3 from '@/assets/img/a-3.png'
export default class FootTab extends React.Component {
render() {
return <div>
<p>
<img src={a1} />
<span>首页</span>
</p>
<p>
<img src={require('@/assets/img/a-3.png')}/>
<span>我的</span>
</p>
</div>
}
}
4.引入sass
1.安装sass npm install node-sass -D
2.安装依赖 npm install sass-loader node-sass --save-dev
修改config下的配置文件webpack.config.js
rules:[
...
{
exclude: [/\.js$/,/\.html$/,/\.json$/,/\.scss$/], //添加类别
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]'
},
},
//新增
{
test:/\.scss$/,
loaders:['style-loader','css-loader','sass-loader']
}
]
5.警告 ：'XXX' is defined but never used
页面引入了'XXX'却没有使用，注掉就行
