在webpack和es6

Question

我在关于Angular With Webpack的讲座之后 我正在尝试添加 less loader 并继续收到错误。

 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和style.less文件。

最后，这是我的 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"
  }
}

我知道为什么我会收到这个错误？
感谢

Answer 1

我和你一样有同样的问题。我设法通过微小的改变来解决这个问题。

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';

Answer 2

如果所有文件都位于同一目录（src），则app.js中的第一行应为：

import './style.less';