zoukankan      html  css  js  c++  java
  • react+webpack基础学习配置

    最近学习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属性;

  • 相关阅读:
    oracle oltp系统索引使用监控
    lock检查
    关于报错:django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.3 or newer is required; you have 0.7.11.None
    Django 统计文章阅读量(或热度排名)
    HighCharts数据可视化
    KindEditor编辑器
    [SDOI2008] 洞穴勘测
    [Luogu3768]简单的数学题
    [BZOJ4916]神犇和蒟蒻
    杜教筛小结
  • 原文地址:https://www.cnblogs.com/Yoriluo/p/9104366.html
Copyright © 2011-2022 走看看