如何使用 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 进行引导?的主要内容,如果未能解决你的问题,请参考以下文章
如何防止 jquery 使用 webpack 和 typescript 导入两次?