package.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | { "name" : "helloreact" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" , "start" : "webpack-dev-server --progress --inline" , "dev" : "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088" }, "author" : "lhz" , "license" : "ISC" , "dependencies" : { "babel-preset-react" : "^6.24.1" , "babelify" : "^8.0.0" , "react" : "^15.5.4" , "react-dom" : "^15.5.4" }, "devDependencies" : { "babel-core" : "^6.26.0" , "babel-loader" : "^7.1.2" , "babel-preset-es2015" : "^6.24.1" , "babelify" : "^8.0.0" , "es2015" : "0.0.0" , "react-hot-loader" : "^3.1.3" , "webpack" : "^2.3.2" , "webpack-dev-server" : "^2.4.2" } } |
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const path = require( 'path' ); var webpack = require( 'webpack' ); module.exports = { entry: "./src/index.js" , output: { path: __dirname, filename: "./src/js/bundle.js" , publicPath: "/src/" }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" , include: __dirname, query: { presets: [ "es2015" , "react" ] } }] } } |
index.js
1 2 3 4 5 6 7 | var React = require( 'react' ); var ReactDOM = require( 'react-dom' ); ReactDOM.render( <h1>helloworld</h1>, document.getElementById( 'example' ) ); |
index.html
1 2 | < div id = "example" >helloreact</ div > < script src = "./src/js/bundle.js" ></ script > |
修改index.html时命令行有变化,但是localhost无变化
轻松入门 React 开发,React Router 4 与 Webpack 2 完美升级项目
了解课程