Simple configuration of webpack

install react

npm install react --save-dev
npm install react-dom --save-dev

Install webpack

npm install webpack --save-dev

Install babel transcoding, you can use jsx syntax

npm install babel-core --save=dev
npm install babel-loader --save=dev
npm install babel-preset-es2016 --save=dev
npm install babel-preset-react --save=dev

Directory structure

configuration webpack.config.js

var path = require('path');
var webpack = require('webpack');

var config = {
	entry: [
		//'webpack/hot/dev-server',
		'webpack/hot/only-dev-server',
		'webpack-dev-server/client?http://localhost:8080',//Resource server address
		path.resolve(__dirname, 'app/js/main.js') // define the entry file
	],
	output: { // define the export directory
		//publicPath: "http://127.0.0.1:9090/build/",
        path: path.resolve(__dirname, 'build/js'),
        filename: 'bundle.js'
    },
	module: {
		loaders: [
			{
				test: /.jsx?$/, // matches file types with 'js' or 'jsx' suffix
				loaders: 'babel-loader', // same with 'babel-loader'
				exclude: /node_modules/, //Exclude files
				query:{
					 presets: ["es2016", "react"]
				}
			}
		]
	},
	plugins:[
		
	]
}

module.exports = config;

main.js references jsx components

import Hello from './modules/hello.jsx';

hello.jsx component

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component{
	render(){
		return <h1>hello</h1>;
	}
}
ReactDOM.render(<Hello/>, document.getElementById("hello"));

index.html page file

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="hello"></div>
    <!--Automatically generated after webpack compilation-->
    <script src="bundle.js"></script>
  </body>
</html>

Compile the packager

webpack

Install the webpack development server. After starting the service, enter http://localhost:8080 in the browser to access

npm install webpack-dev-server --save-dev

Modify the webpack.config.js file and add the hot start plugin. Compile and start the service automatically after modifying the script.

plugins:[
	new webpack.DefinePlugin({
			'process.env.NODE_ENV': '"development"'
		}),
		new webpack.HotModuleReplacementPlugin()
	]

Modify the package.json file

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "webpack-test",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "author": "wangzhenjia",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.5.4",
    "webpack-dev-server": "^2.7.1"
  }
}

Run the npm run dev command to start the service and enter http://localhost:8080 in the browser to access

npm run dev

Reference article

https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
https://fakefish.github.io/react-webpack-cookbook/Getting-started.html

Simple configuration of webpack

Guess you like