react+webpack基礎學習配置

最近學習react，公司的項目是使用create-react-app來搭建的，而我想從新使用node+mysql+react來搭建一個新的博客。

今天嘗試從零開始搭建一個webpack+react項目，過程還算順利。總結一下步驟：

一、建立一個項目文件夾Blog，cd進入文件夾目錄，輸入

npm init -y

生成package.json文件；

 

二、工程目錄建立，以下如是個人工程目錄

public是webpack打包後生成的文件夾，src是邏輯組件文件夾，assets是靜態文件

webpack.config.js用來配置webpack；.babelrc配置babel

 

三、建立必須文件

在src文件夾中建立入口文件index.js，建立文件夾conponents用來承載組件；建立App,js做爲組件入口文件；

 

四、安裝依賴，如下爲我所安裝的依賴

 

五、webpack的配置，重中之重

var path = require('path');

module.export = {
  mode:'development',//設置模式
  entry:path.resolve(__dirname,'src'),//入口文件  
  output:{
     path:path.resolve(__dirname,'public'),//出口文件夾
     filename:'build.js'//輸出的文件名稱
  },
  
  modules:{
    rules:[
       {
          test:/\.js$/,
          exclude:/node_modules/,
          loader:'babel-loader',
       },
       {
           test:/\.scss$/,
           loader:['style-loader','css-loader','sass-loader']
        }
    ]
  },
   devServer:{
        inline:true,//實時更新
        open:true,//更新後自動打開瀏覽器
        contentBase:path.join(__dirname,'./public')//指向根目錄位置，也就是index.html文件位置
    }
}    

.babelrc配置

{
   "presets":["es2015","react"],
   "plugins":["transform-object-rest-spread"]
}

 

六、項目開始

在src的index.js入口文件下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />,document.getElementById('app'));

components目錄下的組件入口文件App.js

import React from 'react';

class App extends React.Component {
  render() {
    return (
       <div>
            Hello World!
       </div>
    );
  }  
}        

export default App;

　　

7.運行npm start；要在package.json中的scripts字段中設置start命令內容：

"start":"webpace-dev-server --devtool eval --progress --colors"

便可啓動項目；若是端口衝突，可在webpack.config.js文件下設置devServer的port屬性；