react + express + node + webpack

今天药忘吃喽~ 2022-03-01 00:26 188阅读 0赞

最近想搭建一个react + express + node + webpack的全栈的网站 （自己安装好node）

### 1 安装express ###

npm install express -g

### 2.安装express-generator ###

npm install -g express-generator

### 3.创建项目 ###

express -e projectname   //(这里生成的模板引擎是ejs)

### 4.运行项目 ###

cd 工程目录下执行 `npm install & npm start`(打开浏览器输入localhost:3000 就会出现初始的效果)

### 5.app.js中的静态资源配置如下： ###

app.use('/client/static', express.static(path.join(__dirname, 'client/static')));

方便在index.html中引用

### 6.设置模板引擎为html （主要是因为html文件看起来更为舒适） ###

##### 6.1安装 ejs #####

npm install ejs --save

##### 6.2在app.js文件中引入ejs #####

var ejs = require('ejs')  
    app.set('views', './client/view'); //为index.html的路径  
    app.engine('html',ejs.__express);  
    app.set('view engine','html');

到这里就成功的将引擎模板改为HTML了

### 7.配置webpack.config.js （主要是配置入口文件，输出文件及位置和各种配置项） ###

##### 7.1入口文件 #####

enter：{  
       index：‘index.js’  
    }

##### 7.2输出文件 #####

output：{  
      path：__dirname + ‘/output/',  
      filename :'[name].bundle.js'  
    }

注意的是，文件输出的位置是位于webpack.config.js同级目录output下的，\[name\]则是对应多个入口文件的键值

##### 7.3配置react，less，css，js等各种文件资源打包的配置项。这个可根据自己的实际情况去配置 #####

### 8在app.js文件中调用webpack来打包文件 ###

##### 8.1安装webpack #####

npm install -g webpack

##### 8.2调用webpack #####

//在express中加载webpack模块  
    var webpack = require('webpack');  
    //webpack的配置文件  设置webpack.config.js路径  
    var webpackConfig = require('./client/webpack.config');  
    //启动webpack的方法webpack(配置文件对象，回调)  
    var compiler = webpack(webpackConfig,function(err,stats){  
        //我们可以在stats中看到webpack打包的过程与命令行执行的结果是一样的  
        console.log(stats.toString({  
            colors:true  
        }));  
        //通过compiler对象可以开启watch模式来监听原文件的变化，如果原文件发生改变就会  
        //出发webpack的重新打包回调函数内部与打包函数是一样的  
        compiler.watch({  
            aggregateTimeout: 300,  
            poll: undefined  
        },function(err,stats){  
        })  
    });

### 9.配置静态资源 ###

配置静态资源 设置为打包后的路径 如果前面设置调用路径，那么在html引用的时候也需要加上设置的调用路径才ok

app.use('/client/static', express.static(path.join(__dirname, 'client/static')));

### 10安装的react 开发依赖 ###

npm install --save-dev babel-core babel-loader babel-plugin-import babel-preset-latest babel-preset-react babel-preset-stage-0 clean-webpack-plugin css-loader file-loader html-webpack-plugin node-sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-serve

–save是保存这些依赖的版本到package.json  
\-dev是 安装到package.json的devDependencies属性中  
babel-core 如果某些代码需要调用 Babel 的 API 进行转码，就要使用babel-core模块。  
babel-loader es6转码（最好安装7.1.5版）  
babel-preset-latest es6最新转码规则  
babel-plugin-import antd按需加载样式  
babel-preset-react react 转码规则  
babel-preset-stage-0 e67转码  
css-loader css模块加载  
file-loader file模块加载 比如图片就需要这个file加载  
node-sass scss模块加载  
sass-loader scss模块加载  
style-loader css模块加载  
url-loader 图片url模块加载  
webpack webpack核心包  
webpack-cli 如果你使用 webpack 4+ 版本，你还需要安装 CLI  
webpack-dev-server 达到浏览器自动刷新的效果  
clean-webpack-plugin webpack可以配置清空某个文件夹  
html-webpack-plugin html默认模板导入插件