Question

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

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/] 
        }
      ]
    }
}

但是当＆＃34; npm start＆＃34;时出现以下错误说未找到模块：错误：无法解析＆＃39;文件＆＃39;或者＆＃39;目录＆＃39; ..：

$ 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.

Answer 1

在查找更多解决方案之后，我发现this answer遇到了同样的问题，解决方法是在webpack.config上下文属性中使用path.resolve，如下所示：

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

当我在Windows上运行应用程序时，会出现此问题（请参阅this）

找不到模块：错误：无法解析＆＃39; file＆＃39;或者＆＃39;目录＆＃39;当在指令中需要一个css文件时

1 个答案: