react + express + node + webpack

彭礼骞

2023-12-01

最近想搭建一个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默认模板导入插件