2 lukang520 lukang520 于 2017.01.05 17:50 提问

webpack 打包 angular 的问题

我要死了,真的,调试了一天了
打包完美运行
angular已经全局设置,可以用
就是没办法在js里面调用 angular
可以在HTML里面调用angular
你说奇怪不奇怪

 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var path = require('path');
var webpack = require('webpack');
var fs = require('fs');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var srcDir = path.resolve(process.cwd(), 'src');

//获取多页面的每个入口文件,用于配置中的entry
function getEntry() {
    console.log('srcDir:' + srcDir);
    var jsPath = path.resolve(srcDir, 'js');
    var dirs = fs.readdirSync(jsPath);
    var matchs = [], files = {};
    dirs.forEach(function (item) {
        matchs = item.match(/(.+)\.js$/);
        if (matchs) {
            files[matchs[1]] = path.resolve(srcDir, 'js', item);
        }
    });
    return files;
}

module.exports = {
    cache: true,
    devtool: "source-map",
    entry: getEntry(),
    output: {
        path: path.join(__dirname, "dist/js/"),
        publicPath: "dist/js/",
        filename: "[name].js",
        chunkFilename: "[chunkhash].js"
    },
    module: {
        loaders: [
            {
                test: require.resolve(srcDir + '/js/lib/angular-1.5.8.js'),
                loader: "exports?window.angular"
            }//对于非模块化的库,可以通过exports插件暴露出全局变量,如angular
        ],
        //配置webpack直接忽略不解析该文件的依赖关系。对于比较大的库很有用,如reactjs.主要提高打包速度。
        noParse: [
            srcDir + '/js/lib/angular-1.5.8.js'
        ]
    },
    resolve: {
        alias: {
            jquery: srcDir + "/js/lib/jquery.min.js",
            angular: srcDir + "/js/lib/angular-1.5.8.js",
            Config: srcDir + "/js/lib/config.js",
            core: srcDir + "/js/core",
            ui: srcDir + "/js/ui"
        }
    },
    plugins: [
        //提供全局的变量,在模块中使用无需用require引入
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            angular: "angular",
            $: "jquery",
            Config: "Config"
        }),
        new CommonsChunkPlugin('common.js'),
        new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};
 console.log(angular);
$('body').append('<a>index</a>');
var app = angular.module('myApp', []);
app.controller('lukang', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

index.js:2 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20lukang

报错这个

要不就是 t.module is not 这个错 哎

2个回答

lukang520
lukang520   2017.01.05 17:51

坐等大神来救我!!坐等大神来救我!!坐等大神来救我!!坐等大神来救我!!

Tsapi
Tsapi   2017.02.08 11:57

new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
mangle: false,
compress: {
warnings: false
},
})
把mangle 设置成false即可

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
Webpack入门——使用Webpack打包Angular项目的一个例子
通过一个例子介绍如何将前端模块管理利器Webpack用在Angular项目中。
gulp+webpack+angular1的一点小经验(第二部分webpack包起来的angular1)
又一周过去了,项目也已经做得有点模样了。收集来一些小经验,分享给大家,有疏漏之处,还望指正,海涵。   上周整合了gulp与webpack,那么工具准备差不多了,我们就开始编码吧。编码的框架就是angular了(现在已经出了es6了,配合angular2其实很酷,有兴趣的朋友们去玩喽,这里还是angular1)。   从哪开始呢?对的,我们要先有个angular。还要能让webpack通过一句:
Webpack打包 ng2英雄指南
本文首发简书 http://www.jianshu.com/p/f5a21f18cfae, 欢迎转载,但请注明转载链接,谢谢!概述ng2英雄指南相关问题 这篇记录的是在实操 英雄指南过程中遇到的问题以及解决方法,后来在社区中询问 【雪狼】, 实际开发ng过程中一般使用哪种成熟打包配置工具,被告知可以使用 webpack, Angular-CLI。 经过查看几个github ng2入门项目,确实是用w
angular2.0 webpack css url 图片路径问题
基于angular 2.0 rc4 github上的一个种子项目二次开发 angular2-seed 需要修改的几个地方: webpack.config.js 增加以下配置项,需要注意的是必须先安装 node-sass、css-to-string-loader、sass-loader、url-loader footer.ts footer.scss
webpack4.6.0打包包含oclazyload组件(懒加载)的angular1.x工程
当前能百度到的webpack打包包含oclazyload组件的angular1.x工程的文章大多用的是webpack1.x版本,但实际上webpack.config里很多1.x版本的配置项在最新的4.6.0里已经废弃了(或名称、位置发生了调整),这意味着我们直接拿用webpack1.x版本可以成功打包的源码工程过来用最新版本的webpack打包是会报错的,出错信息可以看这里了解一下:webpack...
angular5+webpack项目采坑
这是公司git上clone下来的用angular5+webpack写的移动端项目,安装好依赖包后运行报错,各位大神帮忙看看呢
webpack独立打包与缓存处理
前言 http://www.cnblogs.com/luozhihao/p/6623819.html?utm_source=tuicool&utm_medium=referral 先前写了一篇webpack入门的文章《webpack入门必知必会》,简单介绍了webpack拆分、打包、压缩的使用方法。本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方
webpack2和angular2搭建的项目
用webpack2搭建的ng2项目,利用webpackDevServer进行热加载
Angular2 + Webpack项目搭建Demo
本文将从头开始编写实际的代码来完成一个angular2的demo。 题外话是其实angular2官网的快速开始项目已经很酷炫了,但其侧重快速二字,只够拿来练习玩耍,倒是github上确实已经有了一些不错的angular2-starter。   1. 安装必要的node环境与npm 当然TS环境也是必须的,目前TS已经更新到了2.1.5+,笔者使用的就是2.1.5版本
webpack踩坑之路 (2)——图片的路径与打包
webpack踩坑之路 (2)——图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle)。下面我们就来分析下在webpack项目中图片的应用场景。 在实际生产中有以下几种图片的引用方式: 1. HTML文件中img标签的src属性引用或者内嵌样式引用 img