Can`t get it to work with simple Webpack config

[Johannes Henrich]

Hey,
I just can not get the plugin to work with my project. I have a simple webpack config like this:

const path = require('path');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
    entry: {
        polyfills: './src/polyfills.ts',
        vendor: './src/vendor.ts',
        main: './src/main.ts'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'src')
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: "./src",
        port: 9000
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new StyleLintPlugin({
            configFile: '.stylelintrc',
            context: './src/',
            files: '**/*.scss',
            failOnError: false,
            quiet: false,
        })
    ],
    module: {
        rules: [{
                test: /\.ts$/,
                use: [
                    'awesome-typescript-loader'
                ]
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: {}
            },
            {
                test: /\.html$/,
                use: [
                    'html-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

I installed all the required dependencies for bootstrap 3 as said by the documentation. But i dont know how to active the loader now because i dont know where to put the require('bootstrap-loader');.

The other option: entry: [ 'bootstrap-loader', './app' ] won`t work either because i cant simply pass this in my entry array in the webpack config

my package.json is shown below

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "src/main.js",
  "repository": "",
  "author": "jh",
  "license": "MIT",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "serve": "webpack-dev-server --open"
  },
  "devDependencies": {
    "animate.css": "^3.5.2",
    "awesome-typescript-loader": "^3.2.2",
    "bootstrap-sass": "^3.3.7",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "exports-loader": "^0.6.4",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.0",
    "html-webpack-plugin": "^2.30.1",
    "imports-loader": "^0.7.1",
    "jquery": "^3.2.1",
    "node-sass": "^4.5.3",
    "raw-loader": "^0.5.1",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "stylelint": "^8.0.0",
    "stylelint-config-recommended": "^1.0.0",
    "stylelint-webpack-plugin": "^0.9.0",
    "tslint": "^5.5.0",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.4.2",
    "url-loader": "^0.5.9",
    "waypoints": "^4.0.1",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

[Justin Gordon]

@jhenrich Please see the examples directory for inspiration.

If you want personalized help on this, please consider our Coaching Plan.