我正在尝试使webpack和mapbox-gl在Meteor系统中一起工作。我到处都在寻找有关上述错误的信息，但是没有任何效果。这是我的webpack设置
{ "root": "src", "devServer": { "host": "localhost" }, "sass": { "module": true }, "css": { "module": true }, "node": { "fs": "empty" }, "externals": { "fs": "{}", "tls": "{}", "net": "{}", "console": "{}" }, "module": { "loaders": [ { "test": "/\\.js$/", "include": "./node_modules/mapbox-gl/js/render/painter/use_program.js", "loader": "transform/cacheable?brfs" }, { "test": "/\\.js$/", "include": "./node_modules/mapbox-gl-shaders/index.js", "loader": "transform/cacheable?brfs" }, { "test": "/\\.js$/", "include": "./node_modules/webworkify-webpack/index.js", "loader": "worker" }, { "test": "/\\.css$/", "loader": "style!css?importLoaders=1!autoprefixer", "include": [ "./node_modules" ] }, { "test": "/\\.scss$/", "include": [ "./node_modules" ] }, { "test": "/\\.sass$/", "loader": "!style!css!sass?indentedSyntax!", "include": [ "./node_modules" ] }, { "test": "/\\.json$/", "loader": "json-loader" }, { "test": "/\\.(png|jpg|jpeg|gif)$/", "loader": "url-loader" } ] }, "postcss": [ "autoprefixer({ browsers: [last 2 versions'] })" ], "postLoaders": [ { "include": "./node_modules/mapbox-gl/", "loader": "transform", "query": "brfs" } ], "resolve": { "alias": { "webworkify": "webworkify-webpack" } } }
供您参考，我使用了Reactive Stack提供的webpack，它设置webpack的方式略有不同。
这是我package.json的npm设置
package.json
"dependencies": { "meteor-node-stubs": "^0.2.3", "meteoredux": "0.0.2", "numeral": "^1.5.3", "object-assign": "^4.0.1", "react": "^0.14.8", "react-addons-create-fragment": "^0.14.8", "react-addons-css-transition-group": "^0.14.8", "react-addons-linked-state-mixin": "^0.14.8", "react-addons-perf": "^0.14.8", "react-addons-pure-render-mixin": "^0.14.8", "react-addons-test-utils": "^0.14.8", "react-addons-transition-group": "^0.14.8", "react-addons-update": "^0.14.8", "react-dom": "^0.14.8", "react-helmet": "^3.0.0", "react-mixin": "^3.0.4", "react-redux": "^4.4.4", "react-tap-event-plugin": "^0.2.2", "redux": "^3.4.0", "string": "^3.3.1" }, "devDependencies": { "babel": "^6.3.26", "babel-core": "^6.7.4", "babel-loader": "^6.2.4", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-transform": "^2.0.0", "babel-plugin-transform-decorators-legacy": "^1.3.2", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "brfs": "^1.4.3", "css-loader": "^0.23.1", "expose-loader": "^0.7.1", "extract-text-webpack-plugin": "^0.9.1", "file-loader": "^0.8.5", "geojson": "^0.3.0", "less": "^2.3.1", "less-loader": "^2.2.3", "node-sass": "^3.6.0", "react-transform-catch-errors": "^1.0.0", "react-transform-hmr": "^1.0.1", "redbox-react": "^1.2.0", "sass-loader": "^3.2.0", "sass-resources-loader": "^1.0.2", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.13.0", "webpack-hot-middleware": "^2.4.1", "json-loader": "^0.5.4", "webworkify-webpack": "^1.1.0", "transform-loader": "^0.2.3", "mapbox-gl": "^0.19.0" }
我做错了什么？感谢MDG的人可以解释该错误，因为我认为它与Meteor系统有关。仅供参考，我npm start用来运行页面
npm start
更新
根据@also的建议，我将部分设置移至 webpack.conf.js
webpack.conf.js
const path = require('path'); const webpack = require('webpack'); module.exports = { resolve: { extensions: ['', '.js', '.jsx'], alias: { webworkify: 'webworkify-webpack' } }, module: { loaders: [{ test: /\.json$/, loader: 'json-loader' }, { test: /\.js$/, include: path.resolve('./node_modules/mapbox-gl-shaders/index.js'), loader: 'transform/cacheable?brfs' }], postLoaders: [{ include: /node_modules\/mapbox-gl-shaders/, loader: 'transform', query: 'brfs' }] } };
我从这里得到设置。和我的webpack.json
webpack.json
{ "root": "src", "devServer": { "host": "localhost" }, "sass": { "module": true }, "css": { "module": true }, "module": { "loaders": [ { "test": "/\\.css$/", "loader": "style!css?importLoaders=1!autoprefixer", "include": [ "./node_modules", "./src/SewApps/client/css", "./src/SewApps/client/Search/css" ] }, { "test": "/\\.scss$/", "include": [ "./node_modules", "./src/SewApps/client/css", "./src/SewApps/client/Search/css" ] }, { "test": "/\\.sass$/", "loader": "!style!css!sass?indentedSyntax!", "include": [ "./node_modules" ] }, { "test": "/\\.(png|jpg|jpeg|gif)$/", "loader": "url-loader" } ] }, "postcss": [ "autoprefixer({ browsers: [last 2 versions'] })" ] }
但我仍然遇到另一个错误
=> Exited with code: 8 W20160609-14:26:04.106(8)? (STDERR) W20160609-14:26:04.107(8)? (STDERR) /Users/muhaimincs/Documents/soulja/src/.meteor/local/build/programs/server/app/server.js:59 W20160609-14:26:04.107(8)? (STDERR) import { ReactRouterSSR } from 'meteor/reactrouter:react-router-ssr'; W20160609-14:26:04.107(8)? (STDERR) ^^^^^^ W20160609-14:26:04.107(8)? (STDERR) SyntaxError: Unexpected reserved word W20160609-14:26:04.107(8)? (STDERR) at /Users/muhaimincs/Documents/suolja/src/.meteor/local/build/programs/server/boot.js:278:30 W20160609-14:26:04.107(8)? (STDERR) at Array.forEach (native) W20160609-14:26:04.107(8)? (STDERR) at Function._.each._.forEach (/Users/muhaimincs/.meteor/packages/meteor-tool/.1.3.1.r1m70++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11) W20160609-14:26:04.107(8)? (STDERR) at /Users/muhaimincs/Documents/soulja/src/.meteor/local/build/programs/server/boot.js:133:5
以下webpack.config.js对我有用。它结合了@also对于brfs匹配器的好主意：
var webpack = require('webpack') var path = require('path') module.exports = { entry: './app.js', output: { path: __dirname, filename: 'bundle.js' }, resolve: { extensions: ['', '.js'], alias: { webworkify: 'webworkify-webpack', 'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js') } }, module: { loaders: [ { test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015', 'stage-0'] } }, { test: /\.json$/, loader: 'json-loader' }, { test: /\.js$/, include: path.resolve(__dirname, 'node_modules/webworkify/index.js'), loader: 'worker' }, { test: /mapbox-gl.+\.js$/, loader: 'transform/cacheable?brfs' } ] }, };
我有一个不断更新的工作示例。
