React-webpack——開發一個react項目所需準備

npm init —產生package.json檔案

安裝依賴 npm install –save react npm install –save react-dom npm install –save-dev webpack npm install –save-dev webpack-dev-server npm install –save-dev babel-core npm install –save babel-polyfill npm install –save-dev babel-loader npm install –save-dev style-loader css-loader npm install –save-dev file-loader npm install –save babel-runtime npm install –save-dev babel-plugin-transform-runtime npm install –save-dev babel-preset-es2015 npm install –save-dev babel-preset-react npm install –save-dev babel-preset-stage-2 npm install –save webpack-cli’ npm install –save-dev node-sass//可以不加，相應的下面的配置中關於sass部分要刪去 npm install –save-dev sass-loader//可以不加 npm install redux react-redux //不知道redux的可以不加

開啟 package.json 然後添加下面的scripts:

“scripts”: {
“start”: “webpack-dev-server –hot –inline –colors –content-base ./build”,
“build”: “webpack –progress –colors”
}

配置webpack.config.js檔案

在根目錄下建立webpack.config.js檔案，輸入以下內容

```var webpack = require('webpack');module.exports = { entry: './src/app/index.js', output: {     path: __dirname + '/build',     filename: "bundle.js" }, module: {     rules: [{         test: /\.js$/,         exclude: /node_modules/,         loader: 'babel-loader',         query: {             plugins: ['transform-runtime'],             presets: ['es2015', 'react', 'stage-2']         }     },      {         test: /\.css$/,         use:['style-loader','css-loader']     },     {        test: /\.scss$/,        use: [            'css-loader',            'sass-loader'        ]    },    {        test: /\.(png|svg|jpg|gif|mp4)$/,        use: ['file-loader']    }    ] }};```

基本配置完成 接下來看看目錄
寫完代碼後運行npm start即可跑起來 剛接觸react的朋友可以去看官網的教程，兩句代碼就搞好一個腳手架，不需要自己配。對初學者還是很友好的。–>傳送門<–