webpack搭建React开发的脚手架

直接附上webpack.config.js的配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname+'/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.js|jsx$/,
      use: ['babel-loader'], 
      exclude: /node_modules/
    }]
  },
  devServer: {
    contentBase: __dirname+'/dist',  // 生成的打包目录
    host: 'localhost',
    port: 9999,
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      hash: true                         // 防止缓存
    })
  ]
}

对于安装的模块babel以及react基础依赖具体如下：

npm i babel-loader@7.x babel-core babel-preset-env babel-preset-stage-0 --save-dev
npm i babel-preset-react react react-dom --save-dev

package.json文件中引入的模块依赖如下：

  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.0",
    "webpack-dev-server": "^3.1.14"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development"
  },