webpack 打包一個簡單react組件


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

 

全局的npm模塊安裝:

npm install -g webpack

安裝jsx-loader

npm install --save-dev jsx-loader

 

默認使用當前目錄的自己新創建的webpack.config.js作為配置文件

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語法 

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

 


創建entry.js入口文件,將一個Hello組件輸出到界面:

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

 

 創建根目錄index.html文件

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

 

項目文件夾結構:

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

 

 在當前目錄執行webpack命令之后,在assets目錄將生成bundle.js,打包了entry.js的內容

webpack

 

通過npm安裝Webpack開發服務器並啟動它:

npm install webpack-dev-server -g
webpack-dev-server --progress --colors

 

好現在可以通過http://localhost:8080/webpack-dev-server/index.html打開頁面,如下:

 

[轉載] http://www.cnblogs.com/fastmover/p/4867599.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM