Skip to content

Instantly share code, notes, and snippets.

@Sparkenstein
Last active May 21, 2018 18:54
Show Gist options
  • Save Sparkenstein/448c0dcc0888e0061d8a7f321136d7ec to your computer and use it in GitHub Desktop.
Save Sparkenstein/448c0dcc0888e0061d8a7f321136d7ec to your computer and use it in GitHub Desktop.
webpack works differently in development and production mode with angularjs
/** @ngInject */
export default function bodyCtrl($log) {
var vm = this;
init();
function init() {
$log.info("Angular loaded");
$log.warn("Error loading angular")
}
}
Error
columnNumber: 594
fileName: "http://127.0.0.1:5500/dist/main.js"
lineNumber: 76
message: "[$injector:unpr] Unknown provider: eProvider <- e <- bodyCtrl\nhttp://errors.angularjs.org/1.6.9/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20bodyCtrl"
stack: "i/<@http://127.0.0.1:5500/dist/main.js:76:594\nQt/a.$injector<@http://127.0.0.1:5500/dist/main.js:76:24094\ns@http://127.0.0.1:5500/dist/main.js:76:25679\nQt/l<@http://127.0.0.1:5500/dist/main.js:76:24177\ns@http://127.0.0.1:5500/dist/main.js:76:25679\nu@http://127.0.0.1:5500/dist/main.js:76:25984\ninvoke@http://127.0.0.1:5500/dist/main.js:76:26072\nxn/this.$get</</<@http://127.0.0.1:5500/dist/main.js:76:58150\nie@http://127.0.0.1:5500/dist/main.js:76:49875\nce/<@http://127.0.0.1:5500/dist/main.js:76:43449\nce/<@http://127.0.0.1:5500/dist/main.js:76:43466\nle/<@http://127.0.0.1:5500/dist/main.js:76:42662\ni/</<@http://127.0.0.1:5500/dist/main.js:76:10633\n$eval@http://127.0.0.1:5500/dist/main.js:76:99549\n$apply@http://127.0.0.1:5500/dist/main.js:76:99773\ni/<@http://127.0.0.1:5500/dist/main.js:76:10591\ninvoke@http://127.0.0.1:5500/dist/main.js:76:26316\ni@http://127.0.0.1:5500/dist/main.js:76:10512\nOe@http://127.0.0.1:5500/dist/main.js:76:10801\nAe@http://127.0.0.1:5500/dist/main.js:76:10046\n@http://127.0.0.1:5500/dist/main.js:76:176646\nn@http://127.0.0.1:5500/dist/main.js:76:16674\n"
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Style sheets -->
<link rel="stylesheet" href="dist/main.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-mfizz/2.4.1/font-mfizz.min.css">
<!-- SCRIPTS -->
<script src="dist/main.js"></script>
</head>
<body ng-controller="bodyCtrl">
<h1>Hello World</h1>
</body>
</html>
import angular from 'angular';
import bodyCtrl from './controllers/body.controller';
(
function(){
angular
.module('main',[])
.controller('bodyCtrl', bodyCtrl)
}
)();
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "A demo",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --inline --progress"
},
"author": "Sparkenstein",
"license": "MIT",
"dependencies": {
"angular": "^1.6.9",
"bootstrap": "^4.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.1"
},
"devDependencies": {
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-alpha.0",
"file-loader": "^1.1.11",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
}
}
var webpack = require('webpack')
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
mode: "development",
entry : {
main : [
'./assets/js/index',
'./assets/js/custom'
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jp(e*)g|gif|svg|woff|woff2|eot|ttf|svg)$/,
use: 'url-loader?limit=100000'
}
]
},
plugins: [
new ExtractTextPlugin("[name].min.css", {
allChunks: true
}),
// new webpack.ProvidePlugin({
// $: "jquery",
// jQuery: "jquery"
// })
]
}
@anthonydivanna
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment