Question

我决定从angular 2和webpack开始。但现在我有一个问题。我从一些webpack示例开始，例如：

如果您从webpack示例中看到package.json（node_modules文件夹）是OUT，但启动示例不是问题。但是当我尝试使用Angular 2做同样的事情时，我有下一个错误：

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Cannot resolve module 'html' in G:\project
  \Front-Account\webPack\proyecto\prueba1:
  Error: Cannot resolve module 'html' in G:\project\Front-Account\webPack\p
  royecto\prueba1

  - compiler.js:88
    [proyecto]/[html-webpack-plugin]/lib/compiler.js:88:16

  - Compiler.js:214 Compiler.<anonymous>
    [nodejs]/[webpack]/lib/Compiler.js:214:10

  - Compiler.js:403
    [nodejs]/[webpack]/lib/Compiler.js:403:12

  - Tapable.js:67 Compiler.next
    [nodejs]/[webpack]/[tapable]/lib/Tapable.js:67:11

  - CachePlugin.js:40 Compiler.<anonymous>
    [nodejs]/[webpack]/lib/CachePlugin.js:40:4

我的package.json是：

{
  "name": "proyecto",
  "version": "1.0.0",
  "description": "mis pruebas angular 2",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "postinstall": "typings install"
  },
  "keywords": [
    "build",
    "demo",
    "webpack"
  ],
  "author": "Julio Vasquez",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.1",

    "core-js": "^2.4.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",

    "lodash" : "latest",

    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "ts-loader": "^0.8.1",
    "typescript": "^1.8.9",
    "typings": "^1.0.4",

    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.9.0"
  }
}

我的webpack.config.js

var webpack             = require('webpack');
//var webpackMerge        = require('webpack-merge');
var HtmlWebpackPlugin   = require('html-webpack-plugin');
var ExtractTextPlugin   = require('extract-text-webpack-plugin');
var helpers             = require('./config/helpers');

var path                = require('path');

module.exports = {
  entry: {
    'polyfills' : './src/polyfills.ts',
    'vendor'    : './src/vendor.ts',
    'app'       : './src/main.ts'
  },

  resolve: {
    extensions: [
      '', 
      '.js', 
      '.ts'
      ]
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts'
      },
      {
        test: /\.html$/,           
        loaders: ['html'],
        include: path.join(__dirname, '.')
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),

    new ExtractTextPlugin('[name].css')
  ], 


  devtool: 'cheap-module-eval-source-map',

  output: {
    path          : helpers.root('dist'),
    publicPath    : 'http://localhost:8080/',
    filename      : '[name].js',
    chunkFilename : '[id].chunk.js'
  },

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }

};

我的项目文件夹结构是：

\proyecto
|node_modules
|package.json
|_ prueba1
  |_ src
  | |_ app
  | |_ index.html
  | |_ main.ts
  | |_ polyfills.ts
  | |_ vendor.ts
  |_ config
  |_ typings
  |_ webpack.config.json
  |_ tsconfig.json
  |_ typings.json

有什么问题？

有人可以帮助我吗？ - 谢谢

无法使用webpack加载npm包

0 个答案: