Bootstrap 如何使用 Webpack？

Question

我正在使用 webpack 将一些 boostrap 和其他 css 文件打包成一个，下面是 webpack.config.js 文件 var htmlWebPack = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: "./app/main.ts",
    output: {
        path: __dirname + '/dist',
        filename: "bundle.js"
    },
    resolve: {   
    extensions: ['.js','.ts']
  },
    module: {
        loaders: [
          {
              test: /\.tsx?$/,
              loader: 'awesome-typescript-loader'
          },
          {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
             test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
           loader: 'url-loader' }
        ]
    },
    plugins: [
    new htmlWebPack({
        template: './index.html',

    }),
      new ExtractTextPlugin("minified-style.css"),
    ]

};

并且我在 main.ts 文件中引用了我的 bootstrap 文件夹，如下所示

require('../Content/bootstrap/bootstrap.min.css');
require('../Content/bootstrap/bootstrap-theme.min.css');

但是当我运行 webpack 时，我收到类似这样的错误

D:\project\angularControls\angularControls\node_modules\loader-runner\lib\loadLoader.js:35

throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");

^ Error: Module 'D:\project\angularControls\angularControls\node_modules\url\url.js'

is not a loader (must have normal or pitch function)

不确定出了什么问题。

Answer 1

Webpack 在灵活性和功能方面取得了长足的进步。虽然我前段时间也有同样的问题，但我并没有花太多时间来设置一个模块来使用 bootstrap 和 webpack。欢迎访问GitHub Repo.

中的代码

希望对大家有所帮助。

Bootstrap 如何使用 Webpack？

How to use Webpack for Bootstrap?

webpack

webpack-style-loader