运行build
时出现以下错误ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s).
Example: if your old code looked like this:
ExtractTextPlugin.extract('style-loader', 'css-loader')
您可以将其更改为：
ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' })
可用选项包括：
loader: string | object | loader[]
fallbackLoader: string | object | loader[]
publicPath: string
以下是我的package.json：
{
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"core-js": "^2.4.1",
"ng2-popover": "0.0.13",
"primeng": "^1.1.2",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.25"
},
"devDependencies": {
"argv": "0.0.2",
"autoprefixer": "^6.2.2",
"bootstrap-loader": "~1.2.1",
"bootstrap-sass": "^3.3.7",
"browser-sync": "^2.9.11",
"browser-sync-spa": "^1.0.3",
"css-loader": "^0.23.1",
"css-to-string-loader": "^0.1.1",
"del": "^2.0.2",
"eslint": "^2.11.0",
"eslint-config-xo-space": "^0.12.0",
"eslint-loader": "^1.3.0",
"extract-text-webpack-plugin": "github:steinpilz/extract-text-webpack-plugin#type-error-investigations",
"file-loader": "^0.9.0",
"font-awesome": "^4.7.0",
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-filter": "^4.0.0",
"gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
"gulp-sass": "^2.1.1",
"gulp-typescript": "^2.13.6",
"gulp-util": "^3.0.7",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.5.2",
"json-loader": "^0.5.4",
"karma": "^0.13.14",
"karma-chrome-launcher": "^0.2.3",
"karma-coverage": "^0.5.3",
"karma-jasmine": "^1.0.2",
"karma-junit-reporter": "^0.4.2",
"karma-phantomjs-launcher": "^1.0.1",
"karma-source-map-support": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-story-reporter": "^0.3.1",
"karma-webpack": "^1.7.0",
"ng2-bootstrap": "^1.1.16-10",
"node-sass": "^3.8.0",
"phantomjs-prebuilt": "^2.1.12",
"postcss-loader": "^0.8.0",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^3.2.3",
"sass-resources-loader": "~1.1.0",
"style-loader": "^0.13.0",
"ts-loader": "^0.9.0",
"tslint": "^3.2.1",
"tslint-loader": "^2.1.0",
"typescript": "~2.1.4",
"typings": "^1.4.0",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.22",
"webpack-dev-server": "^1.16.2",
"webpack-fail-plugin": "^1.0.5",
"yargs": "^5.0.0"
},
"scripts": {
"build": "gulp",
"serve": "gulp serve",
"serve:dist": "gulp serve:dist",
"test": "gulp test",
"test:auto": "gulp test:auto",
"postinstall": "typings prune && typings install"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"jasmine": true
},
"extends": [
"xo-space/esnext"
]
}
}
以下是我的webpack-dist.conf
const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const NoErrorsPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{
test: /.json$/,
loaders: [
'json'
]
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: 'css-loader'
})
},
{
test: /\.(sass|scss)$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style',
loader: ['css', 'resolve-url', 'sass', 'sass-resources']
})
},
{
test: /\.(woff|woff2)$/,
loader: 'url',
query: {
limit: 10000,
minetype: 'application/font-woff'
}
},
{
test: /\.(ttf|eot|svg|jpg|png)$/,
loader: 'url'
},
{
test: /\.ts$/,
exclude: /node_modules/,
loaders: [
'ts'
]
},
{
test: /\.html$/,
exclude: /index\.html$/,
loader: [
'html'
]
}
],
noParse: [ /zone\.js\/dist\/.+/, /angular2\/bundles\/.+/ ]
},
sassResources: conf.path.src('assets/styles/sass-resources.scss'),
plugins: [
//https://github.com/AngularClass/angular2-webpack-starter/issues/993 fixes typescript warning
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
__dirname
),
new webpack.optimize.OccurrenceOrderPlugin(),
NoErrorsPlugin,
new HtmlWebpackPlugin({
template: `${conf.path.src('index.html')}`,
inject: true,
appD: conf.getAppDID()
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
'root': JSON.stringify(conf.paths.root)
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {unused: true, dead_code: true} // eslint-disable-line camelcase
}),
new ExtractTextPlugin({filename: 'index-[contenthash].css', allChunks: true}),
new webpack.optimize.CommonsChunkPlugin({names: ['vendor', 'polyfills']})
],
postcss: () => [autoprefixer],
output: {
path: path.join(process.cwd(), conf.paths.dist),
filename: '[name]-[hash].js',
libraryTarget: 'umd'
},
resolve: {
extensions: [
'',
'.webpack.js',
'.web.js',
'.js',
'.ts'
]
},
debug: false,
bail: true,
entry: {
polyfills: `./${conf.path.src('polyfills')}`,
vendor: `./${conf.path.src('vendor')}`,
app: `./${conf.path.src('index')}`
},
ts: {
configFileName: 'tsconfig.json'
},
tslint: {
configuration: require('../tslint.json'),
formattersDirectory: '../node_modules/tslint-loader/formatters/',
failOnHint: true
}
};
有人指导我，我做错了什么
答案 0 :(得分：0)
您的bootstrap-loader（v1）需要"extract-text-webpack-plugin": "<2.0.0"作为peer dependency，并且他们会像版本1一样调用它。但是您的版本超过2.0.0。您还应将boostrap-loader升级到其版本2：
npm install --save-dev bootstrap-loader@latest
当你在这里时，你应该升级extract-text-webpack-plugin，因为你使用的那个分支远远落后。官方extract-text-webpack-plugin软件包不再处于测试阶段，也不再是webpack。