React学习之围棋记谱本制作一环境准备

　　这几天边学边做，实现了react+bootstrap+jquery+webpack+express+oracledb的集成。

　　oracledb编译请看： http://www.jb51.cc/article/p-fwuzzlbm-bqq.html
　　webpack打包bootstrap请看： http://www.jb51.cc/article/p-fueezucc-bqq.html
　　webpack学习请看： http://www.jb51.cc/article/p-rmkkivua-bqq.html

　　网上类似的文章很多。我只贴一下我的两个重要配置文件。

一、package.json

{
  "name": "rwne","version": "1.0.0","description": "React+Webpack+Node.js+Express","main": "app.js","scripts": {
    "test": "test"
  },"keywords": [
    "wallimn","study"
  ],"author": "wallimn","license": "ISC","dependencies": {
    "babel-core": "^6.18.2","babel-loader": "^6.2.8","babel-preset-es2015": "^6.18.0","babel-preset-react": "^6.16.0","bootstrap-sass": "^3.3.7","css-loader": "^0.26.0","ejs": "^2.5.2","express": "^4.14.0","jquery": "^3.1.1","jsx-loader": "^0.13.2","nodemon": "^1.11.0","oracledb": "^1.11.0","react": "^15.4.0","react-dom": "^15.4.0","style-loader": "^0.13.1","tether": "^1.3.8","webpack": "^1.13.3"
  },"devDependencies": {
    "bootstrap-loader": "^1.3.1","extract-text-webpack-plugin": "^1.0.1","file-loader": "^0.9.0","html-webpack-plugin": "^2.24.1","node-sass": "^3.13.0","resolve-url-loader": "^1.6.0","sass-loader": "^4.0.2","url-loader": "^0.5.7"
  }
}

二、webpack.config.js

var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

//var goCssExtractor = new ExtractTextPlugin('css/go.css');

module.exports = {
    // 页面入口文件配置
    entry : {
        'main/index': './js/view/main/index.js','main/go': './js/view/main/go.js',//'view/main/jquery':'jquery','public/bootstrap':'bootstrap-loader',},// 入口文件输出配置
    output : {
        path : path.join(__dirname,'..','dist'),filename : 'js/[name].bundle.js'
    },devtool: 'eval-source-map',module: {
        // 加载器配置
        loaders: [
        {test: /\.js$/,loader: 'babel-loader!jsx-loader?harmony' },//{test: /\.css$/,loader: 'style-loader!css-loader'},{test: /\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")},{test: /\.scss$/,loaders:['style','css','sass']},{test: /\.(png|jpe?g|ico|bmp|gif)$/,loader: 'file?limit=10000&name=/img/[name]-[hash:8].[ext]'},{test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader : 'file?limit=10000&mimetype=application/font-woff&name=/font/[name]-[hash:8].[ext]'},{test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,loader : 'file?name=/font/[name]-[hash:8].[ext]'},//{test: /bootstrap-sass\/assets\/javascripts\//,loader: 'imports-loader' },]        
    },// 其他解决方案配置
    resolve: {
        extensions: ['','.js','.jsx','.css','.json','.scss'],sassLoader:{
		includePaths:[path.resolve(__dirname,'../../node_modules/bootstrap-sass')]
	},// 插件项
    plugins : [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,output: {
                comments: false,}),new webpack.ProvidePlugin({
        	$:'jquery',jQuery:'jquery',"window.jQuery":'jquery'
        }),new webpack.HotModuleReplacementPlugin(),new webpack.ProvidePlugin({
	      'window.Tether': 'tether',new HtmlwebpackPlugin({
		      title: 'empty page',chunks:['main/index','public/bootstrap'],template:'template/index.html',filename:  'index.html',chunks:[],filename:  'empty.html',new HtmlwebpackPlugin({
		      title: '在线记谱本',chunks:['main/go',template:'template/go.html',filename:  'go.html',new ExtractTextPlugin("css/style.css"),]
}

三、程序入口app.js

// 引入模块
var express = require('express');
var path = require('path');
var ejs = require('ejs');

var app = express();

// 新增接口路由
app.get('/data/:module',function (req,res,next) {
    var c_path = req.params.module;
    var Action = require('./server/action/' + c_path);
    Action.execute(req,res);
});

// 对所有(/)URL或路由返回index.html 
app.get('/',res) {
    res.render('index');
});
// 对所有(/)URL或路由返回index.html 
app.get('/go',res) {
    res.render('go');
});

// 设置views路径和模板
app.set('views',path.join(__dirname,'dist'));
app.set('view engine','html');
app.engine('html',ejs.renderFile);

// app.use配置
app.use('/',express.static(path.join(__dirname,'dist')));

// 启动一个服务，监听从8888端口进入的所有连接请求
var server = app.listen(8888,function(){
    var host = server.address().address;
    var port = server.address().port;
    console.log(__dirname);
    console.log(path.join(__dirname,'dist'));
    console.log("views="+app.get("views"));
    console.log("process.cwd()="+process.cwd());
    console.log('Listening at http://%s:%s',host,port);
}); 

四、所有文件 　　把所有文件打包上传一下，可以作为node.js的web项目的基础配置及示范。如有需要请从附件下载。

原文地址：https://www.jb51.cc/react/305350.html