最近学习react-webpack项目搭建，找到一篇我认为不错的博客，跟着学习了一番，写得很详细很好，本篇博客纯属记录总结，要看更详细的搭建过程及解析，请戳：
一、项目创建
1. 新建项目文件夹（手动新建或者执行命令：mkdir webpack-react），这里以webpack-react作为项目文件夹名称
2. 进入文件夹webpack-react，然后执行初始化命令：npm init
3. 在webpack-react下创建下列相应文件夹和文件：
bin
|--dev-server.js （webpack-dev-server配置文件）
src(项目主文件夹,后面编写的文件大多都放在这里)
|--App.js
|--index.js
|--index.template.html
webpack(webpack配置文件夹)
|--webpack.config.js
.babelrc(babel配置文件，json)
二、根目录下执行命令，安装react、webpack
npm install react react-dom --save
npm install webpack --save-dev
如果你使用 webpack 4+ 版本，你还需要安装 CLI: npm install --save-dev webpack-cli
注：这里选择在项目本地安装webpack。不推荐全局安装 webpack，全局安装webpack会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。在node_modules/.bin/文件夹里执行命令查看webpack版本: webpack -v
三、安装Babel相关
因为react使用不能被浏览器直接解析的jsx语法，需引入Babel进行转码，执行命令：
npm babel-core babel-loader babel-preset-es2015 babel-preset-react --save
注： babel-loader：babel加载器； babel-preset-es2015：支持es2015； babel-preset-react： jsx 转换成js；
四、安装webpack-dev-server，项目根目录下执行命令：
npm install webpack-dev-server --save-dev
五、安装html-webpack-plugin，项目根目录下执行命令：
npm install html-webpack-plugin --save-dev
六、各文件代码如下：
bin/dev-server.js
1 'use strict' 2 3 const WebpackDevServer = require('webpack-dev-server'); 4 const config = require('../webpack/webpack.config'); 5 const webpack = require('webpack'); 6 const path = require('path'); 7 const compiler = webpack(config); 8 9 const server = new WebpackDevServer(compiler, { 10 contentBase: path.resolve(__dirname, '../dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹 11 historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html 12 port: 9090, //如果省略，默认8080 13 publicPath: "/" 14 }); 15 server.listen(9090, 'localhost', function (err) { 16 if (err) throw err 17 })
src/App.js
1 /* 2 * 引入的模块是否需要用{}包裹，取决于该模块被导出时是否默认导出 3 * 比如这里的 App 使用export default 默认导出， 在其他地方需要引入App时，则不需要{}包裹 4 */ 5 import React, { Component } from 'react'; 6 7 export default class App extends Component{ 8 render () { 9 return ( 10 <div>Hello React-webpack!</div> 11 ) 12 } 13 }
src/index.js
1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 import App from './App'; 4 5 ReactDOM.render( 6 <App />, 7 document.getElementById('app') 8 )
src/index.template.js
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title><%= htmlWebpackPlugin.options.title %></title> 6 </head> 7 <body> 8 <div id="app"> 9 </div> 10 </body> 11 </html>
webpack/webpack.config.js
1 const path = require('path'); 2 const webpack = require('webpack'); 3 const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 5 module.exports = { 6 mode: "development", 7 entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录 8 output: { 9 path: path.resolve(__dirname, '../dist'), // 输出的路径 10 filename: 'app/[name]_[hash:8].js' // 打包后文件 11 }, 12 module: { 13 rules: [ 14 { 15 test: /.(js|jsx)$/, 16 loader: 'babel-loader', 17 exclude: /node_modules/ 18 } 19 ] 20 }, 21 plugins: [ 22 // Html-webpack-plugin配置 23 new HtmlWebpackPlugin({ 24 template: path.resolve(__dirname, '../src/index.template.html'), 25 inject: true 26 }) 27 ] 28 }
.babelrc
1 { 2 "presets": [ 3 "es2015", 4 "react" 5 ] 6 }
七、基础的环境就搭建好了，在根目录下运行： npm run dev，然后浏览器访问 http://localhost:9090 ，如果看到Hello React-webpack! 就说明搭建成功了。