yarn add slim-lang-loader --dev
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PATHS = {
source: path.join(__dirname, 'source'),
build: path.join(__dirname, 'build')
}
module.exports = {
entry: PATHS.source + '/index.js',
output: {
path: PATHS.build,
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({
template: PATHS.source + '/index.slim'
})
],
module: {
rules: [
{
test: /\.slim$/,
loader: 'slim-lang-loader'
}
]
}
};
ERROR in Error: Child compilation failed:
Module parse failed: D:\projectruby\bogdan.github.io\node_modules\html-webpa
ck-plugin\lib\loader.js!D:\projectruby\bogdan.github.io\node_modules\slim-la
ng-loader\index.js!D:\projectruby\bogdan.github.io\source\index.slim Unexpec
ted token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html><html><head><title>Slim Examples</title><meta content="templa
te language" name="keywords" /></head><body><h1>MMMM</h1></body></html>
| :
SyntaxError: Unexpected token (1:0)
- compiler.js:76
[bogdan.github.io]/[html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:296 Compiler.<anonymous>
[bogdan.github.io]/[webpack]/lib/Compiler.js:296:10
- Compiler.js:499
[bogdan.github.io]/[webpack]/lib/Compiler.js:499:13
- Tapable.js:138 next
[bogdan.github.io]/[tapable]/lib/Tapable.js:138:11
- CachePlugin.js:62 Compiler.<anonymous>
[bogdan.github.io]/[webpack]/lib/CachePlugin.js:62:5
- Tapable.js:142 Compiler.applyPluginsAsyncSeries
[bogdan.github.io]/[tapable]/lib/Tapable.js:142:13
- Compiler.js:496
[bogdan.github.io]/[webpack]/lib/Compiler.js:496:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[bogdan.github.io]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:649 self.applyPluginsAsync.err
[bogdan.github.io]/[webpack]/lib/Compilation.js:649:19
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[bogdan.github.io]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:640 self.applyPluginsAsync.err
[bogdan.github.io]/[webpack]/lib/Compilation.js:640:11
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[bogdan.github.io]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:635 self.applyPluginsAsync.err
[bogdan.github.io]/[webpack]/lib/Compilation.js:635:10
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[bogdan.github.io]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:631 sealPart2
[bogdan.github.io]/[webpack]/lib/Compilation.js:631:9
- Tapable.js:131 Compilation.applyPluginsAsyncSeries
[bogdan.github.io]/[tapable]/lib/Tapable.js:131:46
- Compilation.js:579 Compilation.seal
[bogdan.github.io]/[webpack]/lib/Compilation.js:579:8
- Compiler.js:493
[bogdan.github.io]/[webpack]/lib/Compiler.js:493:16
- Tapable.js:225
[bogdan.github.io]/[tapable]/lib/Tapable.js:225:11
- Compilation.js:481 _addModuleChain
[bogdan.github.io]/[webpack]/lib/Compilation.js:481:11
- Compilation.js:452 processModuleDependencies.err
[bogdan.github.io]/[webpack]/lib/Compilation.js:452:13
- next_tick.js:73 _combinedTickCallback
internal/process/next_tick.js:73:7
- next_tick.js:104 process._tickCallback
internal/process/next_tick.js:104:9
Child html-webpack-plugin for "index.html":
[0] ./~/html-webpack-plugin/lib/loader.js!./source/index.slim 507 bytes {0} [built] [failed] [1
error]
ERROR in ./~/html-webpack-plugin/lib/loader.js!./source/index.slim
Module parse failed: D:\projectruby\bogdan.github.io\node_modules\html-webpack-plugin\lib\loader.
js!D:\projectruby\bogdan.github.io\node_modules\slim-lang-loader\index.js!D:\projectruby\bogdan.git
hub.io\source\index.slim Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html><html><head><title>Slim Examples</title><meta content="template language" name="ke
ywords" /></head><body><h1>MMMM</h1></body></html>
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageMinPlugin = require('imagemin-webpack-plugin');
const extractHTML = new ExtractTextPlugin('index.html');
const extractCSS = new ExtractTextPlugin('css/style.css');
const conf = {
//context: path.resolve(__dirname, 'dist'),
entry: [
'./src/js/app.js',
'./src/slim/index.slim',
'./src/scss/style.scss'
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/build.js',
},
devServer: {
overlay: true
},
module: {
rules: [
{
test: /\.slim$/,
use: extractHTML.extract({
use: [
{
loader: 'html-loader',
options: {
minimize: false
}
},{
loader: 'slim-lang-loader',
options: {
slimOptions: {
//'pretty': true
}
}
}
]
})
},{
test: /\.scss$/,
use: extractCSS.extract({
use: [
{
loader: 'css-loader',
options: {sourceMap: true}
},{
loader: 'postcss-loader',
options: {sourceMap: true}
},{
loader: 'sass-loader',
options: {sourceMap: true}
}
],
fallback: 'style-loader'
})
},{
test: /\.(png|gif|jpe?g)$/,
loaders: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './images/'
},
},
'img-loader',
]
},{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
encoding: 'base64'
}
},{
loader: 'svgo-loader',
options: {
plugins: [
{
removeViewBox: false
}
]
}
},
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
extractHTML,
extractCSS,
new CopyWebpackPlugin (
[
{from: './src/images', to: 'images'}
], {
ignore : [
{glob: 'svg/*'}
]
}
)
]
};
module.exports = conf;