我正在尝试按照本指南将CKEditor5添加到我的网站：https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html
我已经完成了它告诉我添加加载器的步骤。我没有改变指南告诉你添加到yourwebpack配置的内容。
这是我的完整webpack配置：
'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;
正如您所看到的，我已经为.scss文件和.svg文件添加了加载程序，但是，当我尝试运行webpack时，出现以下错误：
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 '~@ckeditor/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.
这是我的package.json：
{
"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"
}
}
为什么Webpack不使用我在配置文件中添加的加载器？提前谢谢。
答案 0 :(得分：1)
根据CKEditor5存储库中的问题答案，test对于与文件名不匹配的规则存在问题：https://github.com/ckeditor/ckeditor5/issues/139#issuecomment-286551372 - 我更改了测试正则表达式以匹配任何。 svg和.scss文件，现在正在使用相应的加载器。