react+webpack项目基本配置

矫情吗；* 2022-05-26 07:43 252阅读 0赞

1、`npm-init` 生成package.json文件  
2、安装项目依赖

*  `npm intsall --save-dev react react-dom webpack webpack-cli`
 *  `npm install --save-dev webpack-dev-server`
 *  `npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react`
 *  `npm install --save-dev css-loader style-loader`
 *  `npm install --save-dev postcss-loader autoprefixer`
 *  `npm install --save-dev url-loader`
 *  `npm install --save-dev react-transform-hmr babel-plugin-react-transform react-hot-loader/babel`
 *  `npm install --save-dev html-webpack-html`  
    3、webpack.config.js

const webpack=require("webpack");
    const htmlWebpackPlugin=require("html-webpack-plugin");
    module.exports={
        entry:"./src/main",
        output:{
            path:__dirname+"/build",
            filename:"bundle.js"
        },
        devtool:"eval-source-map",
        mode:"development",
        devServer:{
            contentBase:"./public",
            port:"8080",
            inline:true,
            historyApiFallback:true,
            hot:true
        },
        module:{
            rules:[{
                test:/(\.jsx|\.js)$/,
                use:{
                    loader:"babel-loader",
                },
                exclude:/node-modules/
            },{
                test:/\.css$/,
                use:[
                    {
                        loader:"style-loader",
                    },
                    {
                        loader:"css-loader",
                        options:{
                            modules:true,
                            localIdentName:'[name]__[local]--[hash:base64:5]'
                        }
                    },
                    {
                        loader:"postcss-loader"
                    }
                ]
            },{
                test:/\.(png|jpg)$/,
                use:[{
                    loader:"url-loader",
                    options:{
                        limit:8192
                    }
                }]
            }
            ]
        },
        plugins:[
            new webpack.BannerPlugin("版权所有，翻版必究"),
            new htmlWebpackPlugin({
                template:__dirname+"/src/index.tmpl.html"
            }),
            new webpack.HotModuleReplacementPlugin()
        ]
    }

具体参考：[learnReact][]  
参考链接：  
[入门Webpack，看这篇就够了][Webpack]  
[阮一峰 webpack-demos][webpack-demos]  
[从零开始搭建一个react项目][react]

[learnReact]: https://github.com/812913/dailyPractice/tree/master/learnReact
[Webpack]: https://www.jianshu.com/p/42e11515c10f
[webpack-demos]: https://github.com/ruanyf/webpack-demos/blob/master/README.md
[react]: https://www.jianshu.com/p/324fd1c124ad