我正在尝试使用webpack 2提取css文件,以下是我的webpack代码
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './app/main.ts',
output: {
path: './dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{ test: /\.ts$/, use: ['ts-loader'] }
, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', publicPath: "./dist" }) }
, { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, use: 'file-loader' }
]
},
resolve: {
extensions: ['.js', '.ts']
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
minify: {
collapseWhitespace: true
},
})
, new ExtractTextPlugin({
filename: 'style.css',
disabled: false,
allChunks: true
})
]
};
当我删除此行
时 , { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', publicPath: "./dist" })
和插件中的ExtractTextPlugin
对象,我的webpack似乎工作正常,但当我决定提取CSS时,我收到一个错误。
我正在更新package.json文件,只是为了让您了解我正在使用的版本
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.28.1",
"es6-shim": "^0.35.3",
"extract-loader": "^0.1.0",
"extract-text-webpack-plugin": "^2.0.0-rc.0",
"html-webpack-plugin": "^2.28.0",
"lite-server": "^2.2.2",
"style-loader": "^0.16.1",
"ts-loader": "^2.0.3",
"typescript": "~2.0.10",
"typings": "^2.1.1",
"url-loader": "^0.5.8",
"webpack": "^2.1.0-beta.22"
},
"repository": {}
}