webpack 角度数据表

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 是我的 Webpack 配置：

如果我需要在这里配置其他东西，请告诉我。

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;

这是我的 vendor.js 文件

如果我需要在这里配置其他东西，请告诉我。

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');

这是我的 package.json 文件：

如果我需要在这里配置其他东西，请告诉我。

{
  "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

你真的打算包含那个引导 css 吗？ 也许你不应该在你的 CSS 和 SCSS 加载器部分指定 include 属性，让 Webpack 在你需要的地方找到它。所以对这两个做以下操作：

    {test: /\.css$/, loaders: ['style', 'css']} ,
    {test: /\.scss$/, loaders: ['style', 'css', 'sass']}

我通常只对我的 .js 文件使用 include。