webpack 打包一個簡單react組件

時間 2019-11-09

原文原文鏈接

安裝Webpack，並加載一個簡單的React組件

全局的npm模塊安裝：html

npm install -g webpack

安裝jsx-loaderreact

npm install --save-dev jsx-loader

默認使用當前目錄的本身新建立的webpack.config.js做爲配置文件webpack

module.exports = {
    entry: [
      './assets/js/entry.js'
    ],
    output: {
        path: __dirname + '/assets/',
        publicPath: "/assets/",
        filename: 'bundle.js'
    },
    module: {
        loaders: [
          { test: /\.jsx?$/, loaders: ['jsx-loader?harmony'] }
        ]
    }
};

定義了一個簡單的React組件hello.js，使用ES6語法git

var React = require('react');
class Hello extends React.Component {
  render() {
    return (
      <h1>Hello {this.props.name}!</h1>
    );
  }
}
module.exports = Hello;

建立entry.js入口文件，將一個Hello組件輸出到界面：github

var React = require('react');
var Hello = require('./Hello');
React.render(<Hello name="Nate" />, document.body);

建立根目錄index.html文件web

<html>
<head>
</head>
<body>
<script src="/assets/bundle.js"></script>
</body>
</html>

項目文件夾結構：npm

+ assets/
    - js/
        Hello.js
        entry.js
index.html
webpack.config.js

在當前目錄執行webpack命令以後，在assets目錄將生成bundle.js，打包了entry.js的內容服務器

webpack

經過npm安裝Webpack開發服務器並啓動它：webpack-dev-server

npm install webpack-dev-server -g

webpack-dev-server --progress --colors

好如今能夠經過http://localhost:8080/webpack-dev-server/index.html打開頁面，以下：

快速瀏覽更多在線 Demo

想查看源代碼，能夠自行F12，或在github中直接查看源碼，或者歡迎直接留言。ui

相關標籤/搜索

react+webpack+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。