如何使用 Webpack 进行引导?

Posted

技术标签:

【中文标题】如何使用 Webpack 进行引导?【英文标题】:How to use Webpack for Bootstrap? 【发布时间】:2017-08-12 20:29:15 【问题描述】:

我正在使用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 文件中引用了我的引导文件夹

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 (必须有正常或pitch功能)");

^ 错误:模块 'D:\project\angularControls\angularControls\node_modules\url\url.js'

不是装载机(必须有正常或俯仰功能)

不知道出了什么问题。

【问题讨论】:

【参考方案1】:

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

希望对某人有所帮助。

【讨论】:

以上是关于如何使用 Webpack 进行引导?的主要内容,如果未能解决你的问题,请参考以下文章

使用 webpack 为 vue 加载引导程序

如何防止 jquery 使用 webpack 和 typescript 导入两次?

如何在 webpack 中以正确的顺序导入样式

使用 webpack 的多个引导主题

如何使用 webpack 捆绑 puppeteer 进行生产部署?

如何在命令行的每次调用中使用 Webpack 进行增量构建?