react+webpack配置

用node.js生成react文件确实很方便，里边的包都会自动装好，不用再手动安装，配置webpack的时候也很简单，但是由于网上的webpack教程大多都是在建立一个空项目文件夹的前提下的。这样对于像我这样的新手来说真的是非常浪费时间，还有可能遇到各种错误。

很多小伙伴都会觉得用npm start 打开react 文件很麻烦，就想要像打开html文件一样，直接在浏览器端打开react项目中的htnl文件，就能看到react的效果，这当然也是可以用webpack实现的。

1.首先在根目录下新建一个webpack.config.js文件（用node.js 已经生成一个完整的react项目并且已经下载webpack）
生成react项目代码：

cnpm install -g create-react-app

create-react-app my-app

cd my-app/

npm start

配置文件webpack.config.js内容：

module.exports = {entry: __dirname +"/src/index.js",

output: {path: __dirname +"/public",

    filename:"bundle.js"

},

devtool:'eval-source-map',

devServer: {contentBase:"./public",

    historyApiFallback:true,

    inline:true

},

module: {

rules: [

{test:/(\.jsx|\.js)$/,

        use: {loader:"babel-loader",

            options: {

presets: ["env", "react" ] }

},

        exclude:/node_modules/

    },

    {test:/\.css$/,

        use: [

{loader:"style-loader" },

            {loader:"css-loader" } ]

}]

}

};

入口文件(entry)的设置必须是顶级组件的路径
2.初始化项目

npm init

3.打包

webpack

4.然后你就可以直接运行index.html文件