Webpack 2 を使用しているhttps://github.com/ctrlplusb/react-universallyに基づいて反応アプリを構築しています。
私の UI コンポーネントには、http://react-toolbox.comを使用したいと考えています。
別のプロジェクトでWebpack 1を使用してreact-toolboxで動作するWebpackセットアップを行いました。どういうわけか、同様の構成が機能しなくなりました。
/Users/marc/Sites/react-universally/node_modules/react-toolbox/lib/tabs/theme.scss:1 (function (exports, require, module, __filename, __dirname) { @import "../colors"; ^ SyntaxError: Unexpected token ILLEGAL at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:513:28) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3) at Module.require (module.js:468:17) at require (internal/module.js:20:19) at Object.<anonymous> (/Users/marc/Sites/react-universally/node_modules/react-toolbox/lib/tabs/index.js:18:14) at Module._compile (module.js:541:32)
現在の webpack 構成は次のようになります。
{ target: 'web',
node: { __dirname: true, __filename: true },
externals: [],
devtool: 'source-map',
entry:
{ main:
[ 'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true&path=http://localhost:8006/__webpack_hmr',
'/Users/marc/Sites/react-universally/src/index.js' ] },
output:
{ path: '/Users/marc/Sites/react-universally/build/client',
filename: '[name].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: '/',
libraryTarget: 'var' },
resolve:
{ modules: [ '/Users/marc/Sites/react-universally/src', 'node_modules' ],
extensions: [ '.js', '.jsx', '.json', '.scss' ] },
plugins:
[ DefinePlugin { definitions: [Object] },
AssetsWebpackPlugin { options: [Object], writer: [Function: queuedWriter] },
NoErrorsPlugin {},
HotModuleReplacementPlugin { multiStep: undefined, fullBuildTimeout: 200 } ],
module:
{ loaders:
[
{ test: /\.jsx?$/,
loader: 'babel-loader',
exclude: [ /node_modules/, '/Users/marc/Sites/react-universally/build' ],
query: {
env:
{
development: {
plugins: ['react-hot-loader/babel'],
},
},
presets: [
// JSX
'react',
// Webpack 2 includes support for es2015 imports, therefore we used this
// modified preset.
'es2015-webpack',
//Added Stage 0 for destructor
'stage-0'
],
} },
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.css$/, loaders: [ 'style-loader', { loader: 'css-loader', query: { sourceMap: true } }, ] },
{ test: /\.scss$/,
exclude: /(react-toolbox)/,
loaders:
[ 'style',
'css?sourceMap&-minimize',
'postcss',
'sass?sourceMap' ] },
{ test: /\.scss$/,
include: /(react-toolbox)/,
loaders:
[ 'style',
'css?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss',
'sass?sourceMap',
'toolbox' ] },
{ test: /\.font$/, loaders: [ 'style', 'css', 'fontgen' ] },
{ test: /\.(png|jpg|gif)$/, loader: 'url?limit=8192' }
]
}
sassLoader:
{ includePaths:
[ '/Users/marc/Sites/react-universally/src/styles',
'/Users/marc/Sites/react-universally/node_modules' ] },
postcss:
[ Processor {
version: '5.1.0',
plugins: [Object],
postcssPlugin: 'cssnano',
postcssVersion: '5.1.0' } ],
toolbox: { theme: './src/style/themes/toolbox.scss' } }