webpack angular datatables - angularjs

Question

I have a problem with webpack and angularjs datatables.
I get the following error:
Error: Cannot find module "./dist/plugins/bootstrap/datatables.bootstrap.css"
Here is my configuration:
Hier is my Webpack configuration:
Please let me know if I need to configure here something other.
var path = require('path');
var webpack = require('webpack');
var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
var contextDirectory = path.resolve(__dirname, 'src');
var targetDirectory = path.resolve(__dirname, 'target');
var distDirectory = path.resolve(targetDirectory, 'dist');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var NgAnnotatePlugin = require('ng-annotate-webpack-plugin');
var config = {
context: path.resolve(contextDirectory, 'app'),
entry: {
app: './index.js',
vendor: './vendor.js'
}
//app: ['webpack/hot/dev-server', './index.js']
,
output: {
path: distDirectory,
filename: 'app.js'
},
module: {
loaders: [
{test: /\.js$/, loaders: ['ng-annotate', 'babel', 'eslint'], include: contextDirectory},
{test: /\.html$/, loader: 'raw', include: contextDirectory},
{test: /\.json$/, loader: 'json', include: contextDirectory},
{test: /\.css$/, loaders: ['style', 'css'], include: contextDirectory},
{test: /\.scss$/, loaders: ['style', 'css', 'sass'], include: contextDirectory},
{test: /(\.(?:eot|woff|woff2|ttf))/, loader: 'file?name=font/[name]-[hash].[ext]'},
{test: /\.(jpe?g|png|gif|svg)$/, loader: 'file?name=[path][name].[ext]'}
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.DefinePlugin({
ON_TEST: process.env.NODE_ENV === 'test'
}),
new HtmlWebpackPlugin({
template: path.resolve(contextDirectory, 'index.html'),
inject: false
}),
new webpack.HotModuleReplacementPlugin(),
new ChunkManifestPlugin({
filename: "chunk-manifest.json",
manifestVariable: "webpackManifest"
})
],
devServer: {
contentBase: path.resolve(contextDirectory),
proxy: {
'/rest/*': {
target: 'http://localhost:8080/tsportal/',
changeOrigin: true
}
}
},
debug: true,
devtool: 'inline-source-map',
eslint: {
configFiles: path.resolve(contextDirectory, '.eslintrc')
}
};
if (process.env.NODE_ENV !== 'test') {
config.plugins.push(new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */"vendor",
/* filename= */"vendor.js"
));
}
if (process.env.NODE_ENV === 'prod') {
config.output.path = distDirectory;
config.plugins.push(new NgAnnotatePlugin({add: true}));
config.plugins.push(new webpack.optimize.UglifyJsPlugin({comments: false}));
config.devtool = 'source-map';
}
module.exports = config;
Here is my vendor.js file
Please let me know if I need to configure here something other.
require('jquery');
require('datatables');
require('angular');
require('angular-route');
require('angular-sanitize');
require('angular-translate');
require('angular-translate-loader-static-files');
require('angular-ui-bootstrap');
require('ng-lodash');
require('angular-datatables');
Here is my file package.json:
Please let me know if I need to configure here something other.
{
"name": "tsPortalClient",
"version": "0.0.1",
"description": "Ts Portal Client Single Page App",
"scripts": {
"serve": "better-npm-run serve",
"test": "better-npm-run test",
"test-single": "better-npm-run test:single",
"build": "better-npm-run build:dist"
},
"betterScripts": {
"build:dist": {
"command": "npm i && trash target/dist && webpack --colors",
"env": {
"NODE_ENV": "prod"
}
},
"serve": {
"command": "webpack-dev-server --port 3000"
},
"test": {
"command": "karma start",
"env": {
"NODE_ENV": "test"
}
},
"test:single": {
"command": "karma start --single-run",
"env": {
"NODE_ENV": "test"
}
}
},
"devDependencies": {
"angular-mocks": "^1.4.8",
"babel-core": "^6.4.0",
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"better-npm-run": "~0.0.1",
"bootstrap-sass": "^3.3.6",
"chunk-manifest-webpack-plugin": "0.0.1",
"css-loader": "^0.23.1",
"eslint": "1.10.3",
"eslint-loader": "^1.3.0",
"eslint-plugin-babel": "^3.1.0",
"html-webpack-plugin": "^1.6.0",
"json-loader": "^0.5.4",
"karma": "^0.13.19",
"karma-chrome-launcher": "^0.2.2",
"karma-coverage": "^0.5.3",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.3",
"karma-sourcemap-loader": "~0.3",
"karma-spec-reporter": "0.0.23",
"karma-webpack": "^1.7.0",
"ng-annotate-loader": "^0.1.0",
"ng-annotate-webpack-plugin": "0.1.2",
"node-sass": "^3.4.2",
"phantomjs": "^1.9.19",
"phantomjs-polyfill": "0.0.1",
"raw-loader": "^0.5.1",
"sass-loader": "^3.1.2",
"style-loader": "0.13.0",
"trash-cli": "1.2.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.11",
"webpack-dev-server": "1.14.0"
},
"dependencies": {
"angular": "^1.4.8",
"angular-crumble": "^0.2.1",
"angular-route": "^1.4.8",
"angular-sanitize": "^1.4.8",
"angular-translate": "^2.8.1",
"angular-translate-loader-static-files": "^2.8.1",
"angular-ui-bootstrap": "^1.1.0",
"jquery": "^2.2.0",
"ng-file-upload": "^11.2.3",
"ng-lodash": "^0.2.3"
},
"browser": {
"languages": "./src/assets/language/index.js"
},
"engines": {
"node": ">=0.10.0"
}
}

Answer 1

Did you actually intend to include that bootstrap css?
Maybe you should not specify the include property in your CSS and SCSS loader section and let Webpack find it in the place you had required it. So do the follows for these two:
{test: /\.css$/, loaders: ['style', 'css']} ,
{test: /\.scss$/, loaders: ['style', 'css', 'sass']}
I usually use include just for my .js files.