我怎样才能使用快递的webpack？
当我尝试使用一个简单的快递服务器的webpack时，我总是得到吨的错误： express.js
'use strict'; var express = require('express'); var path = require('path'); var url = require('url'); // -------- my proxy---------------------- var app = express(); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.set('port', process.env.PORT || 8080); app.use(function logErrors(err, req, res, next) { console.error(err.stack); next(err); } ); app.listen(app.get('port'), function() { console.info('Express server started at http://localhost:' + app.get('port')); }); 我得到所有这些错误：
Version: webpack 1.10.0 Time: 1200ms Asset Size Chunks Chunk Names outfile 559 kB 0 [emitted] main chunk {0} outfile (main) 498 kB [rendered] [0] ../app/server/express2.js 553 bytes {0} [built] + 125 hidden modules WARNING in ../~/express/lib/view.js Critical dependencies: 78:29-56 the request of a dependency is an expression @ ../~/express/lib/view.js 78:29-56 ERROR in ../~/express/lib/request.js Module not found: Error: Cannot resolve module 'net' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/lib @ ../~/express/lib/request.js 18:11-25 ERROR in ../~/express/lib/view.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/lib @ ../~/express/lib/view.js 18:9-22 ERROR in ../~/express/~/send/index.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send @ ../~/express/~/send/index.js 25:9-22 ERROR in ../~/express/~/etag/index.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/etag @ ../~/express/~/etag/index.js 22:12-25 ERROR in ../~/express/~/send/~/destroy/index.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/destroy @ ../~/express/~/send/~/destroy/index.js 1:17-30 ERROR in ../~/express/~/send/~/mime/mime.js Module not found: Error: Cannot resolve module 'fs' in /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/mime @ ../~/express/~/send/~/mime/mime.js 2:9-22 ERROR in ../~/express/~/send/~/statuses/codes.json Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/statuses/codes.json Line 2: Unexpected token : You may need an appropriate loader to handle this file type. | { | "100": "Continue", | "101": "Switching Protocols", | "102": "Processing", @ ../~/express/~/send/~/statuses/index.js 2:12-35 ERROR in ../~/express/~/send/~/mime/types.json Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/send/node_modules/mime/types.json Line 1: Unexpected token : You may need an appropriate loader to handle this file type. | @ ../~/express/~/send/~/mime/mime.js 87:12-35 ERROR in ../~/express/~/accepts/~/mime-types/~/mime-db/db.json Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/accepts/node_modules/mime-types/node_modules/mime-db/db.json Line 2: Unexpected token : You may need an appropriate loader to handle this file type. | { | "application/1d-interleaved-parityfec": { | "source": "iana" | }, @ ../~/express/~/accepts/~/mime-types/~/mime-db/index.js 11:17-37 ERROR in ../~/express/~/type-is/~/mime-types/~/mime-db/db.json Module parse failed: /Users/Dynopia/Development/DS_Stalker_Frontend/node_modules/express/node_modules/type-is/node_modules/mime-types/node_modules/mime-db/db.json Line 2: Unexpected token : You may need an appropriate loader to handle this file type. | { | "application/1d-interleaved-parityfec": { | "source": "iana" | }, @ ../~/express/~/type-is/~/mime-types/~/mime-db/index.js 11:17-37
这是我的configuration文件：
var webpack = require('webpack'); module.exports = { // Makes sure errors in console map to the correct file // and line number devtool: 'eval', entry: [ './bin/www.js' ], output: { path: './bin/out', filename: 'server.js' }, extensions: [ '', '.jsx', '.js' ], module: { loaders: [ // Compile es6 to js. { test: /app\/.*\.js?$/, loaders: [ 'react-hot', 'babel-loader' ] } ] }, devtool: 'source-map' };
我能做什么，我需要在我的服务器端使用webpack。
我像这样运行express.js文件： ./node_modules/webpack/bin/webpack.js ../app/server/express.js outfile --display-chunks -c --progress -d / ./node_modules/webpack/bin/webpack.js ../app/server/express.js outfile --display-chunks -c --progress -d / ./node_modules/webpack/bin/webpack.js ../app/server/express.js outfile --display-chunks -c --progress -d
我最终做的是我使用了2种不同的configuration，1使用webpack打包服务器的东西，1打包所有的浏览器的东西，还运行webpack dev服务器热重新加载。
服务器webpackconfiguration aka webpack.node.config.js现在看起来像这样：
var webpack = require('webpack'); var path = require('path'); var fs = require('fs'); var nodeModules = {}; // note the path.resolve(__dirname, ...) part // without it, eslint-import-resolver-webpack fails // since eslint might be invoked with different cwd fs.readdirSync(path.resolve(__dirname, 'node_modules')) .filter(x => ['.bin'].indexOf(x) === -1) .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; }); // es5 style alternative // fs.readdirSync(path.resolve(__dirname, 'node_modules')) // .filter(function(x) { // return ['.bin'].indexOf(x) === -1; // }) // .forEach(function(mod) { // nodeModules[mod] = 'commonjs ' + mod; // }); module.exports = { // The configuration for the server-side rendering name: 'server', target: 'node', entry: './app/server/serverEntryPrototype.js', output: { path: './bin/', publicPath: 'bin/', filename: 'serverEntryPoint.js' }, externals: nodeModules, module: { loaders: [ { test: /\.js$/, loaders: [ // 'imports?document=this', // 'react-hot', 'babel-loader' //,'jsx-loader' ] }, { test: /\.json$/, loader: 'json-loader' }, ] }, plugins: [ // new webpack.NormalModuleReplacementPlugin("^(react-bootstrap-modal)$", "^(react)$") // new webpack.IgnorePlugin(new RegExp("^(react-bootstrap-modal)$")) // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) ] };
浏览器webpackconfiguration aka webpack.browser.config.js现在看起来像这样：
var webpack = require('webpack'); var path = require('path'); var buildPath = path.resolve(__dirname, 'assets'); var fs = require('fs'); var commonLoaders = [ { test: /\.js$/, loaders: [ 'react-hot', 'babel-loader' //,'jsx-loader' ] } ]; module.exports = { // Makes sure errors in console map to the correct file // and line number name: 'browser', devtool: 'eval', entry: [ //'./bin/www.js', './app/index.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8081' // WebpackDevServer host and port ], output: { path: buildPath, filename: '[name].js', // Everything related to Webpack should go through a build path, // localhost:3000/build. That makes proxying easier to handle publicPath: 'http://localhost:8081/assets/' }, extensions: [ '', '.jsx', '.js', '.json', '.html', '.css', '.styl', '.scss', '.sass' ], module: { loaders: [ // Compile es6 to js. { test: /app\/.*\.jsx?$/, loaders: [ 'react-hot', 'babel-loader' ] }, ///app\/.*\.json$/ { test: /\.json$/, loader: 'json-loader' }, // Styles { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.s(a|c)ss$/, loader: 'style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss!sass' }, // Fonts { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' } //{ test: /\.png$/, loader: 'url-loader?limit=100000' }, //{ test: /\.jpg$/, loader: 'file-loader' } ], plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] }, postcss: [ require('autoprefixer-core') ], devtool: 'source-map' } ;
从v1.10.2开始，可以通过指定“node”到“target”选项来实现。
供参考： http : //jlongster.com/Backend-Apps-with-Webpack–Part-I
如果要同时捆绑服务器和客户端的代码，可以按照以下方式使用多个configuration。
// webpack.config.js module.exports = [ { name: 'server', entry: './src/server/index.js', target: 'node', output: { path: __dirname + '/dist/server', filename: 'bundle.js', }, }, { name: 'client', entry: './src/client/index.js', // target: 'web', // by default output: { path: __dirname + '/dist/client', filename: 'bundle.js', }, } ];
