react脚手架配置文件的位置及新建项目

一般下载的新脚手架的项目根目录中没有config文件夹，解决方案如下：

• 方案一：暴露出项目配置文件，项目下执行：

npm run eject

然后他会出现：项目下会多出两个文件夹，config和scripts，我们开发中一般只需关心config文件下的webpack.config.dev.js、webpack.config.prod.js、webpackDevServer.config.js,其他多出来的文价不要管他

• 方案二：可以安装这个 npm 包
  react-app-rewired, 建一个新配置文件来覆盖部分默认的 React 配置.

新建项目

//方案1
npm install -g cnpm --registry=https://registry.npm.taobao.org       ------更换国内的源，阿里，每10分钟同步一次
cnpm i -g create-react-app     // --------全局安装脚手架一次
create-react-app test            // --------创建项目
cd test　　　　　　　　　//--------进入到项目
npm start                           //--------启动项目
 
//方案2    -------选择一种就行，根据个人习惯
npx create-react-app my-app
/**
npx 命令，先检查全局中有没有create-react-app,
如果有， 跟上面安装一样
如果没有，先检查当前文件夹下有没有这个命令， 如果有， 跟上面一样
如果没有自动局部安装 create-react-app ，跟上面一样
**/

注意：
1、现在已经不可以全局安装create-react-app了，如果现在执行create-react-app test来新建项目会报错
2、如果之前有全局安装脚手架create-react-app，那么需要卸载，命令如下二选一：npm uninstall -g create-react-app或yarn global remove create-react-app
3、新建项目：npx create-react-app my-app或npm init react-app my-app或yarn create react-app my-app

自己用webpack配置环境时webpack.config.js里的配置项

const path = require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
//   entry: './src/main.js',
//   output: {
//     path: path.resolve(__dirname, 'dist'),
//     filename: 'bundle.js'
//   },
  mode:'development',
  plugins:[
    new htmlWebpackPlugin({
        template:path.join(__dirname,'./src/index.html'), //需要打样的文件
        filename:'index.html' //生成的文件
    })
     ],
    module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']},
        {test:/\.less$/,use:['style-loader','css-loader?modules','less-loader']},
        {test:/\.scss$/,use:['style-loader','css-loader?modules','sass-loader']},
        {test:/\.(jpg|png|gif|bmp|jpeg)$/,use: 'url-loader?limit=15690&name=[hash:8]-[name].[ext]'},
        { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
        { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
    },
    resolve: {
       extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
       alias: {
           '@': path.join(__dirname, './src')//配置”@”
       }
     }
};