我遇到了将webpack更新到版本2.1.0-beta.25的问题,我很想得到你的意见,不知道从哪里开始。这可能是一个简单的配置问题,但也许我正在使用的加载器需要更新。
我正在使用bootstrap-loader和sass-loader加载bootstrap sass文件,这会导致错误......
69% building modules 1180/1181 modules 1 active ...ode_modules/bootstrap-loader/no-op.jsTypeError: Path must be a string. Received undefined
at assertPath (path.js:8:11)
at Object.posix.relative (path.js:495:3)
at Object.onRender (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/index.js:282:42)
at /home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:2231:35
at arrayEach (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:1357:13)
at Object.<anonymous> (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:2223:17)
at Object.<anonymous> (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:338:31)
at Object.callback (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/sass-loader/node_modules/async/dist/async.js:847:20)
at options.success (/home/p3pt/dev/java/projects/spring-boot-angular2/frontend/node_modules/node-sass/lib/index.js:309:32)
堆栈跟踪从bootstrap-loader开始,但大多数都来自sass-loader。查看github上发布的类似问题帖子,我尝试了以下操作......
...
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer],
sassLoader: {
includePaths: [helpers.root('node_modules/bootstrap/scss')]
},
context: __dirname,
}
})
...
但这并没有为我解决问题。同样,不确定实际问题是bootstrap-loader,sass-loader还是只缺少配置选项。任何反馈都将不胜感激。
webpack.common.js
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const helpers = require('./helpers');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = function(options) {
return {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
modules: [helpers.root('src'), "node_modules"],
descriptionFiles: ['package.json'],
extensions: ['*', '.js', '.ts', '.css', '.scss', '.json', '.html']
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
exclude: [helpers.root('node_modules')]
},
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
{
test: /\.css$/,
loader: 'raw-loader!style-loader!css-loader!postcss-loader'
},
{
test: /initial\.scss$/,
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader'})
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /bootstrap\/dist\/js\/umd\//,
loader: 'imports?jQuery=jquery'
}
],
},
plugins: [
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
__dirname
),
new ExtractTextPlugin({
filename: 'css/[name].css',
disable: false, allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new CopyWebpackPlugin([{
from: 'src/assets',
to: 'assets'
}]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
"window.moment": "moment",
'Tether': 'tether',
'window.Tether': 'tether',
Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
Alert: "exports?Alert!bootstrap/js/dist/alert",
Button: "exports?Button!bootstrap/js/dist/button",
Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports?Modal!bootstrap/js/dist/modal",
Popover: "exports?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports?Tab!bootstrap/js/dist/tab",
Util: "exports?Util!bootstrap/js/dist/util"
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer],
sassLoader: {
includePaths: [helpers.root('node_modules/bootstrap/scss')]
},
context: __dirname,
}
})
],
node: {
global: true,
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
}