Getting Grommet mit Webpack 2

Question

Ich versuche, Grommet-Standalone in meiner Anwendung einzurichten.

Ich habe gerade gelernt, benutzerdefinierte Eigenschaften in Webpack-Konfiguration werden nicht mehr unterstützt. so funktioniert sassLoader nicht. Ich kann nicht die Alternative, webpack.LoaderOptionsPlugin, zu arbeiten scheinen. Diese solution zu einer ähnlichen Frage hat bei mir nicht funktioniert.

Werfen Sie einen Blick auf meine webpack.config.js:

/* eslint no-var: 0 */ 

var path = require('path'); 
var webpack = require('webpack'); 
var WriteFilePlugin = require('write-file-webpack-plugin'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var APP_DIR = path.resolve(__dirname, 'app'); 

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8081', 
    'webpack/hot/only-dev-server', 
    path.join(APP_DIR, 'index.jsx') 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js' 
    }, 
    devServer: { 
    contentBase: './build', 
    hot: true, 
    inline: true, 
    historyApiFallback: true 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: path.join(APP_DIR, 'index.tmp.html') 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.LoaderOptionsPlugin({ 
     debug: true, 
     options: { 
     sassLoader: { 
      includePaths: [ 
      './node_modules', 
      // this is required only for NPM < 3. 
      // Dependencies are flat in NPM 3+ so pointing to 
      // the internal grommet/node_modules folder is not needed 
      './node_modules/grommet/node_modules' 
      ] 
     } 
     } 
    }), 
    new WriteFilePlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules|bower_components/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader?outputStyle=compressed' 
     } 
    ] 
    } 
}; 

Hier ist der Fehler Ich erhalte:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js?outputStyle=compressed!./~/grommet/scss/vanilla/index.scss 
Module build failed: 
undefined 
^ 
     File to import not found or unreadable: inuit-defaults/settings.defaults. 
Parent style sheet: C:/Users/TeneceUBA2/workspaces/sts/eagleswings/src/main/resources/public/node_modules/grommet/scss/grommet-core/_settings.scss 
     in C:\Users\TeneceUBA2\workspaces\sts\eagleswings\src\main\resources\public\node_modules\grommet\scss\grommet-core\_settings.scss (line 4, column 1) 
@ ./~/grommet/scss/vanilla/index.scss 4:14-130 13:2-17:4 14:20-136 
@ ./app/index.jsx 
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8081 webpack/hot/only-dev-server ./app/index.jsx 

Und für die Vollständigkeit, hier ist mein package.json

{ 
    "name": "eagles", 
    "version": "1.0.0", 
    "description": "desc", 
    "main": "index.js", 
    "scripts": { 
    "dev": "webpack --config webpack.config.js", 
    "serve": "webpack-dev-server", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Tobe", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-react-transform": "^2.0.2", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "css-loader": "^0.26.1", 
    "eslint": "^3.15.0", 
    "eslint-config-airbnb": "^14.1.0", 
    "eslint-plugin-import": "^2.2.0", 
    "eslint-plugin-jsx-a11y": "^4.0.0", 
    "eslint-plugin-react": "^6.9.0", 
    "html-webpack-plugin": "^2.28.0", 
    "node-sass": "^4.5.0", 
    "react-transform-hmr": "^1.0.4", 
    "sass-loader": "^5.0.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.3.0", 
    "write-file-webpack-plugin": "^3.4.2" 
    }, 
    "dependencies": { 
    "grommet": "^1.2.1", 
    "inuit-defaults": "^0.2.3", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
    } 
} 

Hat jemand Grommet mit webpack2 arbeiten lassen? Google war bei dieser Gelegenheit keine große Hilfe.

Answer 1

Ich hatte heute Morgen genau das gleiche Problem - um Grommet mit dem neuesten Webpack arbeiten zu lassen. Endlich die Lösung gefunden. Hier ist meine webpack.config.js

(wenn npm run build läuft es 2 Dateien erstellt: eine CSS- und JS-Bündel):

const webpack = require('webpack') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 
const HtmlPlugin = require('html-webpack-plugin') 
const rimraf = require('rimraf'); 

const NODE_ENV = process.env.NODE_ENV || 'development' 

module.exports = { 
    context: __dirname + '/src', 
    entry: { 
    app: './app.js' 
    }, 
    output: { 
    path: __dirname + '/build', 
    publicPath: '/', 
    filename: '[name].[hash:16].js' 
    }, 
    resolve: { 
    extensions: ['.jsx', '.js', '.scss', '.css'] 
    }, 
    watch: NODE_ENV == 'development', 
    devtool: NODE_ENV == 'development' ? 'eval' : 'source-map', 
    devServer: { 
    contentBase: 'build/', 
    host: 'localhost', 
    port: 8080, 
    historyApiFallback: true, 
    proxy: [ 
     { 
     path: '/api/', 
     target: 'http://localhost:3000', 
     pathRewrite: {'^/api' : ''} 
     } 
    ] 
    }, 
    plugins: [ 
    { 
     apply: (compiler) => { 
     rimraf.sync(compiler.options.output.path) 
     } 
    }, 
    new webpack.DefinePlugin({ 
     NODE_ENV: JSON.stringify(NODE_ENV) 
    }), 
    new ExtractTextPlugin({ 
     filename: '[name].[contenthash:16].css', 
     allChunks: true 
    }), 
    new HtmlPlugin({ 
     template: './index.html' 
    }) 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     include: __dirname + '/src' 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      use: [ 
      { 
       loader: 'css-loader', 
       options: { 
       sourceMap: true, 
       } 
      }, 
      ] 
     }) 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      use: [ 
      { 
       loader: 'css-loader' 
      }, 
      { 
       loader: 'sass-loader', 
       options: { 
       sourceMap: true, 
       includePaths: [ 
        __dirname + '/node_modules' 
       ], 
       outputStyle: 'compressed' 
       } 
      } 
      ] 
     }) 
     } 
    ] 
    }, 
} 

if (NODE_ENV == 'production') { 
    module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     compress: { 
     warnings: false, 
     drop_console: true, 
     unsafe: true 
     } 
    }) 
) 
    module.exports.plugins.push(
    new BundleAnalyzerPlugin() 
) 
} 

Stellen Sie sicher, dass die neueste Version von ExtractTextPlugin haben. Hier ist meine package.json btw:

{ 
    "private": true, 
    "devDependencies": { 
    "babel-core": "latest", 
    "babel-loader": "latest", 
    "babel-preset-es2015": "latest", 
    "babel-preset-react": "latest", 
    "babel-preset-react-hmre": "latest", 
    "babel-preset-stage-0": "latest", 
    "concurrently": "latest", 
    "css-loader": "latest", 
    "extract-text-webpack-plugin": "^2.0.0-rc.3", 
    "html-webpack-plugin": "latest", 
    "node-sass": "latest", 
    "rimraf": "latest", 
    "sass-loader": "latest", 
    "style-loader": "latest", 
    "webpack": "latest", 
    "webpack-bundle-analyzer": "latest", 
    "webpack-dev-server": "latest" 
    }, 
    "dependencies": { 
    "grommet": "latest", 
    "immutable": "latest", 
    "jwt-decode": "latest", 
    "react": "latest", 
    "react-dom": "latest", 
    "react-helmet": "latest", 
    "react-intl": "latest", 
    "react-redux": "latest", 
    "react-router": "latest", 
    "redux": "latest", 
    "redux-logger": "latest", 
    "validator": "latest" 
    } 
}