让lazyloaded文件(* .ts)编译的正确方法是什么

时间:2017-07-12 12:12:51

标签: angularjs webpack oclazyload

lazyLoading脚本文件通过oclazyloader for angularjs时:

$stateProvider
.state('tokenReceived', {
    url: '/somurl',
    //templateUrl: '/views/index.html',
    controller: "controllers.loremCtrl",
    resolve: {
        deps: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load({
                files: [
                    scriptPath + 'loremCtrl.js'
                ],
                cache:false
            });
        }]
    }
})

andy我的tsconfig.json文件看起来像

{  
  "compilerOptions": {
    "module": "commonjs",
    "typeRoots": [
      "./node_modules/@types/"
    ],
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

webpack中定义的条目类似于

module.exports = function (env) {
    return Merge(require(`./webpack.${env}.js`), {
        entry: {
            vendor: [
                "jquery",
                "toastr"
            ],
            rootApp: "./Scripts/rootApp.js",
        },
        resolve: {            
            extensions: [".ts", "tsx", ".js"]
        },
        module: {
            rules: [
                //NON-PRE                  
                { test: /\.ts?$/, loader: "ts-loader" },
                { test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader'] }) },
                //PRE 
                { test: /(\.png|\.gif|\.ttf|\.eot|\.woff|\.svg)/, loader: "file-loader", enforce: "pre", },
                { test: /\.js$/, loader: "source-map-loader", enforce: "pre", }
            ]
        },
    }
}

让webpack2编译lazyloaded文件(* .ts)的正确方法是什么?

首先我在tsconfig.json compileOnSave:true 中,但是与webpack结合使用时不需要这样做?我错过了什么吗?

是" loremCtrl.ts"编译并保存在" rootApp.js"?我该如何使用webpack来编译lazyloaded文件?

1 个答案:

答案 0 :(得分:0)

这似乎只是在开发时与webpack-dev-server一起更新延迟加载的代码