0

从 angular+webpack 教程中，创建了一个“directives”文件夹，其中包含以下自定义指令的声明

export default ngModule => {
    ngModule.directive('kcdHello', () => {
        require('./kcd-hello.css');
        return {
            restrict:'E',
            scope:{},
            template:require('./kcd-hello.html'),
            controllerAs:'vm',
            controller:function(){
                const vm = this;
                vm.greeting = "Hello Webpack!!6";
            }
        }
    });
}

（注意返回之前的 require 语句）

在 webpack.config.js 中，样式加载器和 css 加载器在模块部分中声明：

  module.exports = {
    context : __dirname + '/app',
    entry:'./app.js',
    output: {
        path : __dirname + '/app',
        filename:'bundle.js'
    },
    module:{
        loaders: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['es2015']
          }
        },
        {
          test: /\.html$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'raw', // 'babel-loader' is also a legal name to reference
        },
        {
          test: /\.css/,
          loaders: ['style', 'css'],
          exclude: [/node_modules/] 
        }
      ]
    }
}

但是当“npm start”说找不到模块时出现以下错误：错误：无法解析“文件”或“目录”..：

$ npm start

> webpack-ng-egg@1.0.0 start M:\Learning webpack\egghead.io - AngularJS - Angula
r and Webpack for Modular Applications\webpack-ng-egg
> webpack-dev-server --content-base app

 http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from M:\Learning webpack\egghead.io - AngularJS - Angular and
Webpack for Modular Applications\webpack-ng-egg\app
Hash: 6a876e291da3f59381dc
Version: webpack 1.13.2
Time: 2505ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.22 MB       0  [emitted]  main
chunk    {0} bundle.js (main) 1.19 MB [rendered]
    [0] ./app/app.js 435 bytes {0} [built]
    [1] ./~/angular/index.js 48 bytes {0} [built]
    [2] ./~/angular/angular.js 1.19 MB {0} [built]
    [3] ./app/directives/index.js 283 bytes {0} [built]
    [4] ./app/directives/kcd-hello.js 417 bytes {0} [built]
    [5] ./app/directives/kcd-hello.css 931 bytes {0} [built] [2 errors]
    [6] ./app/directives/kcd-hello.html 75 bytes {0} [built]

**ERROR in ./app/directives/kcd-hello.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modul
es/css-loader/index.js in M:\Learning webpack\egghead.io - AngularJS - Angular a
nd Webpack for Modular Applications\webpack-ng-egg/app\directives
 @ ./app/directives/kcd-hello.css 4:14-83

ERROR in ./app/directives/kcd-hello.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modul
es/style-loader/addStyles.js in M:\Learning webpack\egghead.io - AngularJS - Ang
ular and Webpack for Modular Applications\webpack-ng-egg/app\directives
 @ ./app/directives/kcd-hello.css 7:13-71**
webpack: bundle is now VALID.
4

1 回答 1

2

在寻找更多解决方案后，我找到了相同问题的答案，解决方案是在 webpack.config 上下文属性中使用 path.resolve ，如下所示：

module.exports = {
    context: require('path').resolve(__dirname, "app"),
    entry:'./app.js',
    output: {
        path : __dirname + '/app',
        filename:'bundle.js'
    },
   (...)

这个问题发生在我在 Windows 上运行应用程序时（见这个）

于 2016-09-09T15:54:45.377 回答