首页 文章

如何使用Webpack for Bootstrap?

提问于
浏览
2

我使用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“'不是加载器(必须具有普通或音调功能)”) ; ^错误:模块'D:\ project \ angularControls \ angularControls \ node_modules \ url \ url.js'不是加载器(必须具有普通或俯仰功能)

不确定出了什么问题 .

1 回答

  • 1

    Webpack在灵活性和功能方面取得了长足的进步 . 虽然一段时间后我有同样的问题,但没有花太多时间设置模块来使用webpack的bootstrap . 随意访问GitHub Repo中的代码 .

    希望它可以帮助某人 .

相关问题