什么是webpack？Webpack的核心概念 (3)

./src/index

import React from \'react\'; import ReactDOM from \'react-dom\'; import App from \'./components/App\'; ReactDOM.render(<App />, document.getElementById(\'app\'));

./src/component/App.js

import React, { Component } from \'react\'; import \'./App.css\'; export default class App extends Component { render() { return ( <div> my react webpack starter </div> ) } }

./src/components/App.css

body{ font-size: 60px; font-weight: bolder; color: red; text-transform: uppercase; }

资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

配置 package.json

最后，在package.json文件里面加上两个scripts，用来运行开发服务器和打包：

package.json

"scripts": { "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }

注意，我们启用了webpack-dev-server的模块热更新功能（HMR），进一步提高我们的开发效率。