oracledb编译请看: http://wallimn.iteye.com/blog/2339894
webpack打包bootstrap请看: http://wallimn.iteye.com/blog/2342194
webpack学习请看: http://wallimn.iteye.com/blog/2337882
网上类似的文章很多。我只贴一下我的两个重要配置文件。
一、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', }), new HtmlwebpackPlugin({ title: 'empty page', chunks:[], template:'template/index.html', filename: 'empty.html', }), new HtmlwebpackPlugin({ title: '在线记谱本', chunks:['main/go','public/bootstrap'], 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('/', function (req, res) { res.render('index'); }); // 对所有(/)URL或路由返回index.html app.get('/go', function (req, 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项目的基础配置及示范。如有需要请从附件下载。