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