1. Zuhause
  2. Frage und Antwort
  3. CKEditor & Webpack: fehlende Lader

CKEditor & Webpack: fehlende Lader

2017-11-10 2 views
0

Ich versuche CKEditor5 auf meiner Website nach dieser Anleitung hinzuzufügen: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.htmlCKEditor & Webpack: fehlende Lader

Ich habe die Schritte getan, wo es mir sagt, die Loader hinzuzufügen. Ich habe nichts an dem geändert, was Sie in der Konfiguration Ihres yourwebpack angeben.

Das ist mein voller webpack config:

'use strict'; 

var webpack = require('webpack'), 
    path = require('path'), 
    glob = require('glob'), 
    ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); 

var pageEntryArray = glob.sync('./assets/scripts/views/**/*.ts'); 
var pageEntries = {}; 
pageEntryArray.forEach(function (item) { 
    var ext = path.extname(item); 
    var filename = path.basename(item, ext); 
    pageEntries[filename] = item; 
}); 

var otherEntries = { 
    'init': ['babel-polyfill', 'whatwg-fetch', 'element-closest', './assets/scripts/init.ts'], 
} 

var entries = Object.assign({}, otherEntries, pageEntries); 

var cacheLoader = { 
    loader: 'cache-loader' 
}; 

var threadLoader = { 
    loader: 'thread-loader', 
    options: { 
     // there should be 1 cpu for the fork-ts-checker-webpack-plugin 
     workers: require('os').cpus().length - 1, 
    } 
}; 

var babelLoader = { 
    loader: 'babel-loader', 
    options: { 
     cacheDirectory: true, 
     presets: ["es2015", "es2016"] 
    } 
}; 

var config = { 
    entry: entries, 
    output: { 
     path: path.resolve(__dirname, './wwwroot/js'), 
     filename: '[name].js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.ts(x?)$/, 
       exclude: /node_modules/, 
       use: [ 
        cacheLoader, 
        threadLoader, 
        babelLoader, 
        { 
         loader: 'ts-loader', 
         options: { 
          happyPackMode: true 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       use: [ 
        cacheLoader, 
        threadLoader, 
        babelLoader, 
       ] 
      }, 
      { 
       test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/, 
       use: ['raw-loader'] 
      }, 
      { 
       test: /ckeditor5-[^/]+\/theme\/[^/]+\.scss$/, 
       use: [ 
        'style-loader', 
        'css-loader', 
        'sass-loader' 
       ] 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['.ts', '.tsx', '.js'] 
    }, 
    plugins: [ 
     new ForkTsCheckerWebpackPlugin({ 
      checkSyntacticErrors: true, 
      tslint: false 
     }), 
     new webpack.ProvidePlugin({ 
      jQuery: 'jquery', 
      $: 'jquery', 
      jquery: 'jquery' 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'common', 
      filename: 'common.js', 
      minChunks: 2 
     }) 
    ] 
}; 

module.exports = config;

Wie Sie sehen, ich habe den Loader für .scss Dateien und .svg Dateien hinzugefügt, aber wenn ich versuche, webpack zu laufen, bekomme ich die folgende Fehler:

ERROR in ./node_modules/@ckeditor/ckeditor5-editor-classic/theme/theme.scss 
Module parse failed: Unexpected character '@' (4:0) 
You may need an appropriate loader to handle this file type. 
| // For licensing, see LICENSE.md or http://ckeditor.com/license 
| 
| @import '[email protected]/ckeditor5-theme-lark/theme/theme.scss'; 
| 
| .ck-editor { 
@ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js 16:0-29 
@ ./assets/scripts/views/project-message/project-message-send.ts 

ERROR in ./node_modules/@ckeditor/ckeditor5-undo/theme/icons/redo.svg 
Module parse failed: Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 16l1-3.982c-3.417 0-8.616.869-10 3.982 0-5.983 6.601-7.96 10-7.96 0-.85-1-3.32-1-4.04l8 6-8 6z" fill="#454545" fill-rule="evenodd"/></svg> 
@ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js 15:0-47 
@ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js 
@ ./assets/scripts/views/project-message/project-message-send.ts 

ERROR in ./node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg 
Module parse failed: Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.825 3.914l-.126.558a5.701 5.701 0 0 0-.685.076c-.282.045-.49.088-.626.127-.237.073-.406.186-.508.338a1.586 1.586 0 0 0-.22.5l-2.03 8.769a1.24 1.24 0 0 0-.034.27c.001.13.03.24.086.33.056.09.157.17.304.237.085.04.27.086.558.14.288.053.502.086.643.097l-.127.558H5.656l.127-.558.677-.05c.293-.023.501-.057.625-.102a1.11 1.11 0 0 0 .5-.326c.112-.138.188-.306.228-.503l2.02-8.778a1.428 1.428 0 0 0 .035-.305.59.59 0 0 0-.072-.295c-.048-.085-.148-.161-.3-.229a3.457 3.457 0 0 0-.622-.19 5.001 5.001 0 0 0-.58-.106l.128-.558h5.403z" fill="#454545" fill-rule="evenodd"/></svg> 
@ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/italic.js 13:0-51 
@ ./assets/scripts/views/project-message/project-message-send.ts 

ERROR in ./node_modules/@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg 
Module parse failed: Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.135 10.409c.361.248.654.56.88.934.225.375.338.816.338 1.324 0 .609-.128 1.123-.385 1.543-.256.42-.624.751-1.103.994a5.908 5.908 0 0 1-1.755.55c-.663.107-1.442.16-2.338.16H4.539v-.66a22.5 22.5 0 0 0 .66-.076c.265-.033.45-.073.558-.118.208-.085.35-.196.427-.334.076-.138.114-.317.114-.537V5.732c0-.203-.031-.372-.093-.507s-.211-.254-.448-.355a3.326 3.326 0 0 0-.61-.182 14.136 14.136 0 0 0-.608-.114v-.66h6.52c1.64 0 2.825.226 3.552.677.727.45 1.09 1.116 1.09 1.995 0 .406-.08.763-.244 1.07a2.388 2.388 0 0 1-.702.8 4.214 4.214 0 0 1-.99.54c-.383.153-.795.28-1.234.381v.16c.44.046.896.143 1.37.292.473.15.885.343 1.234.58zm-2.723-3.611c0-.665-.187-1.184-.562-1.556-.375-.372-.937-.558-1.687-.558-.107 0-.247.004-.419.012l-.444.021v4.449h.44c.913 0 1.587-.213 2.021-.639.434-.425.651-1.002.651-1.73zm.592 5.759c0-.835-.248-1.475-.744-1.92-.496-.445-1.21-.668-2.14-.668a22.977 22.977 0 0 0-.82.034v4.389c.05.208.209.385.474.528.265.144.586.216.964.216.67 0 1.216-.225 1.636-.676.42-.452.63-1.086.63-1.903z" fill="#454545" fill-rule="evenodd"/></svg> 
@ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold.js 13:0-47 
@ ./assets/scripts/views/project-message/project-message-send.ts 

ERROR in ./node_modules/@ckeditor/ckeditor5-undo/theme/icons/undo.svg 
Module parse failed: Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10l8 6-1-3.982c3.417 0 8.616.869 10 3.982 0-5.983-6.601-7.96-10-7.96 0-.85 1-3.32 1-4.04l-8 6z" fill="#454545" fill-rule="evenodd"/></svg> 
@ ./node_modules/@ckeditor/ckeditor5-undo/src/undo.js 14:0-47 
@ ./node_modules/@ckeditor/ckeditor5-essentials/src/essentials.js 
@ ./assets/scripts/views/project-message/project-message-send.ts 
[11:33:35] Finished 'scripts' after 17 s 
Process terminated with code 0.

das ist mein package.json ist:

{ 
    "version": "1.0.0", 
    "name": "crm.einionmedia.com", 
    "private": true, 
    "devDependencies": { 
     "@types/bootstrap": "^3.3.36", 
     "@types/chart.js": "^2.6.2", 
     "@types/eonasdan-bootstrap-datetimepicker": "^4.17.25", 
     "@types/flatpickr": "^3.0.2", 
     "@types/jquery": "^3.2.10", 
     "@types/knockout": "^3.4.44", 
     "@types/lodash.flattendeep": "^4.4.2", 
     "@types/lodash.groupby": "^4.6.3", 
     "@types/lodash.merge": "^4.6.2", 
     "@types/lodash.orderby": "^4.6.2", 
     "@types/numeral": "^0.0.21", 
     "@types/select2": "^4.0.38", 
     "@types/sortablejs": "^1.3.31", 
     "@types/virtual-dom": "^2.0.27", 
     "babel-core": "^6.25.0", 
     "babel-loader": "^7.1.1", 
     "babel-polyfill": "^6.23.0", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-es2016": "^6.24.1", 
     "bootstrap": "^3.3.7", 
     "cache-loader": "^1.0.3", 
     "chart.js": "^2.6.0", 
     "choices.js": "^3.0.2", 
     "ckeditor": "^4.7.3", 
     "del": "^3.0.0", 
     "element-closest": "^2.0.2", 
     "eonasdan-bootstrap-datetimepicker": "^4.17.46", 
     "fine-uploader": "^5.15.0", 
     "flatpickr": "^3.0.2", 
     "font-awesome": "^4.7.0", 
     "fork-ts-checker-notifier-webpack-plugin": "^0.2.0", 
     "fork-ts-checker-webpack-plugin": "^0.2.8", 
     "glob": "^7.1.2", 
     "gulp": "^3.9.1", 
     "gulp-clean-css": "^3.7.0", 
     "gulp-cli": "^1.3.0", 
     "gulp-concat": "^2.6.1", 
     "gulp-imagemin": "^3.3.0", 
     "gulp-sass": "^3.1.0", 
     "gulp-util": "^3.0.8", 
     "imagemin-pngquant": "^5.0.1", 
     "inputmask": "^3.3.8", 
     "jquery": "^3.2.1", 
     "knockout": "^3.4.2", 
     "lodash.flattendeep": "^4.4.0", 
     "lodash.groupby": "^4.6.0", 
     "lodash.merge": "^4.6.0", 
     "lodash.orderby": "^4.6.0", 
     "moment": "^2.18.1", 
     "numeral": "^2.0.6", 
     "path": "^0.12.7", 
     "select2": "^4.0.3", 
     "sortablejs": "^1.6.0", 
     "thread-loader": "^1.1.1", 
     "ts-loader": "^2.3.2", 
     "typescript": "^2.4.2", 
     "virtual-dom": "^2.1.1", 
     "webpack": "^3.8.1", 
     "webpack-notifier": "^1.5.0", 
     "whatwg-fetch": "^2.0.3" 
    }, 
    "dependencies": { 
     "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.1", 
     "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.1", 
     "@ckeditor/ckeditor5-essentials": "^1.0.0-alpha.1", 
     "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.1", 
     "css-loader": "^0.28.7", 
     "node-sass": "^4.6.0", 
     "raw-loader": "^0.5.1", 
     "sass-loader": "^6.0.6", 
     "style-loader": "^0.19.0" 
    } 
}

Warum nicht Webpack nicht die Last er ich in der Konfigurationsdatei hinzugefügt? Danke im Voraus.

Quelle

2017-11-10 nbokmans

Antwort

Verwandte Themen

 Verwandte Themen