我正在尝试将Webpack 2集成到AngularJS 1.6应用程序的构建过程中。我实际上是尝试使用 ExtractTextPlugin 从生成的HTML中提取CSS。
问题是当我使用 ExtractTextPlugin 提取CSS文件时: The CSS is extracted into an external file styles.css但除非我在Chrome控制台中对CSS文件进行更改(即使只添加一个空格)Here I added a space and the CSS was loaded。
,否则它不会加载到页面上我不明白为什么第一次运行时没有加载CSS,为什么在我做任何小改动时会加载。
我一直在关于survvs网站和主要Webpack网站上的SurviveJS和其他教程的本教程。
这是我当前的Webpack配置文件:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')
const path = require('path')
const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const fs = require('fs');
const gracefulFs = require('graceful-fs');
const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const cssnano = require('cssnano');
const posthtml = require('posthtml');
gracefulFs.gracefulify(fs);
module.exports = {
entry: {
main: './src/index.ts'
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '../'
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: __dirname + "/../",
verbose: true
}),
new ngAnnotatePlugin({
add: true
}),
new webpack.optimize.UglifyJsPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.jquery': 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context
&& (module.context.indexOf('node_modules') !== -1 || module.context.indexOf('bower_components') !== -1);
}
}),
//CommonChunksPlugin will now extract all the common modules from vendor and main bundles
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
new webpack.LoaderOptionsPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
hash: true
}),
new CopyWebpackPlugin([{
context: 'raw/',
from: '**/*',
}]),
new OptimizeCssAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: true
}),
new ExtractTextPlugin("styles.css")
],
module: {
loaders: [
{
test: /\.ts(x?)$/,
loader: 'ts-loader'
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract({
fallback: ['style-loader', 'css-loader', 'less-loader'],
use: ['css-loader', 'less-loader']
})
},
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: 'html-loader',
options: {
minimize: true
}
}
]
},
{
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: /\.(gif|png|jpe?g|svg|ico)$/i,
loaders: [
'file-loader',
{
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
}
}
]
},
{
test: /\.ts$/,
enforce: "pre",
loader: 'tslint-loader'
},
{
test: /^((?!\.spec\.ts).)*.ts$/,
enforce: "post",
exclude: /(node_modules|bower_components)/,
loader: 'istanbul-instrumenter-loader'
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
modules: [path.resolve(__dirname, "src"), "node_modules", "bower_components"]
}
};