2016-06-28 4 views
5

Я следую лекции на Angular With Webpack.
Я пытаюсь добавить меньше загрузчика и продолжайте получать сообщение об ошибке.
использование МЕНЬШЕ в webpack и es6

ERROR in ./src/app.js 
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.less in D:\projects\dev\webpack-angular-demo/src 
@ ./src/app.js 3:0-24 

Мои webpack.config.js является:

module.exports = { 
    context: __dirname + '/src', 
    entry:'./app.js', 
    module:{ 
     loaders:[ 
      { 
       //create working environment for es6 need to npm i babel-loader babel-core babel-preset-es2015 -D 
       //https://github.com/babel/babel-loader 
       test:/\.js$/, 
       exclude:'/node_modules', 
       loader:'babel', 
       query: { 
        presets: ['es2015'] 
       } 
      }, 
      { 
       //take less convert to css and inject to style tag need to: npm i css-loader less-loader less style-loader -D 
       //https://github.com/webpack/less-loader 
       test:/\.less$/, 
       exclude:'/node_modules', 
       loader:"style!css!less" 
      }   
     ] 
    } 
}; 

Мои app.js является:

import '../style.less'; 
class Log{ 
    constructor(){ 
     console.log("sdfsdf"); 
    } 
} 
new Log(); 

Внутри Src каталог у меня есть app.js, index.html и стиль. меньше файлов.

наконец, это мой package.json файл:

{ 
    "name": "webpack-angular-demo", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "css-loader": "^0.23.1", 
    "less": "^2.7.1", 
    "less-loader": "^2.2.3", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 


любая идея, почему я получаю эту ошибку?
Благодаря

ответ

4

я имел точно такую ​​же проблему, как и вы. Мне удалось решить это с крошечными изменениями.

path.join(__dirname, 'src') 

вместо использования:

__dirname + '/src/ 

сейчас, убедитесь, что ваш webpack.config.js выглядеть следующим образом:

var path = require('path'); 

module.exports = { 
context: path.join(__dirname, 'src'), 
... 

и когда я импортировать style.less я использовал как выше

import './style.less'; 
+1

Вот и все! большое спасибо. я попытаюсь найти «почему». Тпх – gilad

1

Если все файлы находятся в том же каталоге (src), первая строка в app.js должно быть:

import './style.less';

+0

применение этого исправления с большим количеством ошибок:
ОШИБКА ./src/style.less Модуль не найден: Ошибка: не удается разрешить «файл» или «каталог» ./../node_modules/ css-loader/index.js в D: \ projects \ dev \ webpack -angular-demo/src @ ./src/style.less 4: 14-116 ОШИБКА ./src/style.less Модуль не найден: Ошибка: не удается разрешить «файл» или «каталог» ./. ./node_modules/ style-loader/addStyles.js в D: \ projects \ dev \ webpack-angular-demo/src @ ./src/style.less 7: 13-68 – gilad

+0

с двумя точками используется правильный загрузчик поэтому правило исключения включено. теперь исключение не работает, и также просматривается папка node_modules. я думаю .... – gilad

+0

Если я попытаюсь запустить 'webpack-dev-server' с вашей точной настройкой и моим предложением, он работает нормально. Можете ли вы подтвердить, что все модули установлены/возможно снова запущены 'npm install'? –

Смежные вопросы