我正在尝试使用extract-text-webpack-plugin在我的输出文件夹中生成一个app.css(在我的条目中我正在导入scss' s。)
我看到了这个: Webpack "OTS parsing error" loading fonts
它确实有帮助,因为如果我使用完整路径作为我的publicPath然后它可以工作,但这意味着由于某种原因,extract-text-webpack-plugin不会。
我的配置:
'use strict';
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
module.exports = function makeWebpackConfig (options) {
var BUILD = !!options.BUILD;
var config = {};
config.entry = {
app: './app.js',
iosCordova: ['./static/wrapper/js/ios/cordova_all.min.js'],
androidCordova: ['./static/wrapper/js/android/cordova_all.min.js']
};
config.output = {
path: __dirname + '/_dist',
//the commented out works without generating an app.css in output
//publicPath: BUILD ? 'http://danny.il.corner.com:2222/' : 'http://danny.il.corner.com:8080/',
publicPath: BUILD ? '/' : 'http://danny.il.corner.com:8080/',
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js'
};
if (BUILD) {
config.devtool = 'source-map';
} else {
config.devtool = 'eval';
}
config.module = {
noParse: /node_modules\/html2canvas/,
preLoaders: [],
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015'],
plugins: ['transform-runtime'],
comments: true,
compact: false
},
exclude: [
/node_modules/,
/cordova_all/
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file?name=[name].[ext]'
}, {
test: /\.html$/,
loader: "ngtemplate?relativeTo=" + __dirname + "!raw"
}
,
{
test: /\.(css)$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
},
{
test: /\.scss$/,
loaders: ["style", "css?sourceMap", "sass?sourceMap"]
}
]
};
config.postcss = [
autoprefixer({
browsers: ['last 3 versions']
})
];
config.plugins = [
new ExtractTextPlugin('[name].css'),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
,
new ngAnnotatePlugin({
add: true
})
];
config.plugins.push(
new HtmlWebpackPlugin({
template: './index.html',
inject: true,
excludeChunks: ['app','iosCordova','androidCordova']
})
);
if (BUILD) {
config.plugins.push(
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
)
}
config.devServer = {
stats: {
modules: false,
cached: false,
colors: true,
chunk: false
}
};
return config;
};
感谢帮助者:)