一直以来,都不太会配置webpack,总是用vue-cli或者create-react-app来初始化项目,从而实现零配置。最近在看一本书,《React与Redux实践》,关于webpack,babel等的配置挺好的。本文就着作者思路再次梳理一下了。
在浏览器中运行React
组件复用
毫无疑问,一般用react写自己的组件,src/App.js,返回一个hello world
需要的依赖都在这里,
在浏览器中渲染react组件
src/client.js
webpack配置
因为webpack只有打包功能,所以需要引入babel-loader来实现编译功能。使用webpack和babel-loader打包编译的具体步骤:
安装webpack和babel-loader,babel-core
npm install –save-dev webpack babel-loader babel-core
- 添加webpack.config.js文件制定打包编译的配置信息:12345678910module.exports = {entry: './src/client',output:{path: __dirname + '/static/dist',filename: 'main.js'},module: {loaders: [{test: /\.js$/, exclude: /node_module/, loaders: ['babel-loader']}]}}
entry表示入口文件,output中的path表示输出目录,filename表示输出文件名称。module这部分表示使用babel-loader来编译除了node-modules文件夹下的.js文件.
安装babel-preset-es2015和 babel-preset-react预设
npm install –save-dev babel-preset-es2015 babel-preset-react
添加.babelrc,激活es2015和react的预设
1{"presets": ["react", "es2015"]}编译
npm run build编译, 因为在package.json中写了
12345"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack && http-server -p 3000","build": "webpack"},所以才能用npm run build 以及 npm start
在浏览器中运行
将生成的代码路径加入到index.html中即可运行index.html
至此在浏览器中运行react便完全结束了