react+webpack基础学习配置

Posted 2020-11-09 落落月

最近学习react，公司的项目是使用create-react-app来搭建的，而我想重新使用node+mysql+react来搭建一个新的博客。

今天尝试从零开始搭建一个webpack+react项目，过程还算顺利。总结一下步骤：

1、创建一个项目文件夹Blog，cd进入文件夹目录，输入

npm init -y

生成package.json文件；

 

2、工程目录创建，如下如是我的工程目录

public是webpack打包后生成的文件夹，src是逻辑组件文件夹，assets是静态文件

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

 

3、创建必须文件

在src文件夹中创建入口文件index.js，创建文件夹conponents用来承载组件；创建App,js作为组件入口文件；

 

4、安装依赖，以下为我所安装的依赖

 

5、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"]
}

 

6、项目开始

在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属性；