好久之前搭建的一个react执行环境，受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境，新项目准备用webpack4重新弄弄了，旧的记录就合并发布了
01.初始化项目(安装需要的包) //生成package.json npm init 安装基础包 npm install react react-dom --save npm install webpack@3.10.0 webpack-dev-server@2.7.1 --save-dev <!--webpack和webpack-dev-server同时全局安装一下--> npm install webpack@3.10.0 wepack-dev-server@2.7.1 -gwebpack-dev-server@2.7.3是最后兼容ie9的版本，升级之后会导致打包的文件在ie9下运行报错
安装和配置babel npm install babel-core 核心功能 babel-loader babel-polyfill 转换低版本代码 babel-preset-env 解析Es6 babel-preset-react 解析JSX --save-dev 安装loader包 npm install css-loader style-loader file-loader url-loader image-webpack-loader html-loader --save-dev
--save 会把依赖包名称添加到 package.json 文件 dependencies
dependencies是运行时依赖,是我们发布后还需要依赖的模块
--save-dev 则添加到 package.json 文件 devDependencies
devDependencies是开发时的依赖,在发布后用不到它，而只是在我们开发才用到它
当npm install时，会下载dependencies和devDependencies中的模块，当使用npm install –production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块
02.执行程序,创建文件 创建/.babelrc //.babelrc { "presets": [ "react", "env" ] } 创建webpack.config.js const path = require('path'); module.exports = { context: path.resolve(__dirname, 'app'), resolve: { extensions: ['.js', '.jsx'], //后缀名自动补全,可以使用jsx的文件后缀 modules: [ path.resolve(__dirname, 'node_modules') ] }, entry: 'http://www.likecs.com/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'], } } }, { test: /index\.html/, use: [{ loader: 'file-loader', options: { name (file) { return 'index.[ext]' } } }] } ] }, }; 创建/app/component/App.js import React from 'react'; import Header from './Header'; import Content from './Content'; import Sidebar from './Sidebar'; class App extends React.Component { render() { return ( <div className="app"> <Header/> <Sidebar/> <Content/> </div> ) } } export default App; 创建/app/component/Header.js import React from 'react'; class Header extends React.Component { render() { return ( <div>this is header</div> ) } } export default Header; 创建/app/component/Sidebar.js import React from 'react'; class Sidebar extends React.Component { render() { return ( <div className="sidebar"> this is sidebar </div> ) } } export default Sidebar; 创建/app/component/Content.js import React from 'react'; class Content extends React.Component { render() { return ( <div className="content"> this is content </div> ) } } export default Content; 创建/app/app.js入口文件 import './index.html'; import React from 'react'; import ReactDom from 'react-dom'; import App from './component/App'; ReactDom.render( <App/>, document.getElementById('root') ); 创建/app/index.html <!DOCTYPE html> <html lang="en"> <head> <base href="http://www.likecs.com/"> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <div></div> <script src="http://www.likecs.com/app.js"></script> </body> </html> 执行webpack打包 <!--控制台执行webpack会在/dist中生成一个app.js和index.html--> webpack 03.开启本地服务器 修改webpack.config.js //webpack-dev-server配置 devServer: { contentBase: './dist', historyApiFallback: true, inline: true,//源文件改变,会自动刷新页面 port: 1234,//设置默认监听端口，如果省略，默认为"8080" }, 修改package.json "scripts": { "start": "webpack-dev-server" }, 执行start npm start