webpack2 - 模块解析失败:意外的字符' @'

时间:2017-05-03 06:59:02

标签: angular webpack-2

我正在尝试使用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": {}
}

0 个答案:

没有答案