react-webpack简单配置

Posted 2020-11-19 si-nian

const webpack = require(‘webpack‘);
const path = require(‘path‘);
const htmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
  entry: __dirname + ‘/src/ManageSystem.js‘,
	output: {
	  path: __dirname + ‘/build‘,
		filename: "bundle.js"
	},
	module: {
	   rules: [
		  {
		    test: /.js$/,
				exclude: /node_modules/,
				use: [‘babel-loader‘]
		  }
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: __dirname+‘/template.html‘
		})
	],
	devServer: {
		publicPath: ‘/‘,
		port: 3001,
		historyApiFallback: true,
	}
}

　　

{
	"presets": [
		["es2015", {"modules": false}],
		"react"
	]
}

　　

{
  "name": "StaffManage",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "start": "webpack",
    "dev": "webpack-dev-server  --mode development --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "echarts": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "webpack": "^4.9.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}