WebPack + Slim how to set up?

B

Bogdan2017-05-09 17:41:55

JavaScript

Bogdan, 2017-05-09 17:41:55

Hello! Tell me how to properly configure Webpack to work with the Slim
template engine Installed the package
yarn add slim-lang-loader --dev
Then I registered the processing of webpack.config.js

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>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alexey Strekalov, 2018-06-11
@ryter

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;

K

Konstantin Kitmanov, 2017-05-09
@k12th

In my opinion, he swears at you that html is written in the slim file.