0
这是我的项目的结构angularJS +的WebPack - 生产版本无法正常工作
这是的WebPack配置
var ExtractTextPlugin = require('extract-text-webpack-plugin'),
webpack = require('webpack');
module.exports = {
entry: [
'./src/app.js',
],
output: {
path: __dirname + '/../web/js',
filename: 'build.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
},
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
'window.jQuery': "jquery"
}),
new ExtractTextPlugin('build.css')
]
}
这是app.js(为的WebPack切入点)
import 'babel-polyfill';
import $ from 'jquery';
window.$ = $;
import 'jquery-ui-dist/jquery-ui';
import 'bootstrap/dist/js/bootstrap.js';
import 'bootstrap/dist/css/bootstrap.css';
import 'angular';
import 'angular-ui-sortable';
import './styles.css'
import './controller/app.js'
这是控制器/ app.js(角度应用程序)
import './racks.js'
import './deletedRacks.js'
import './switches.js'
import './deletedSwitches.js'
const myApp = angular.module(
'myApp',
[
'RacksListController',
'DeletedRacksListController',
'SwitchesListController',
'DeletedSwitchesListController',
'ui.sortable'
],
function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}
);
这是控制器(例如使用deletedRacks.js)
(function (window, angular) {
'use strict';
angular.module('DeletedRacksListController', []).controller('DeletedRacksListController', [
'$scope', '$http', function ($scope, $http) {
$scope.racks = [];
$scope.init =() => {
$http({
method: 'GET',
url: Routing.generate('racks_get_deleted')
}).then((response) => {
$scope.racks = response.data;
}, (e) => {
console.log(e)
});
};
$scope.restore = (rack) => {
$http.post(Routing.generate('racks_toggle_delete', {id: rack.id, token: rack.token})).then((response) => {
rack.delete = false;
}, (e) => {
console.log(e)
});
};
}
])
})(window, window.angular);
当我收集的开发模式项目 - 一切正常。控制台中不出现错误。如果我收集有关的生产模式(NPM运行版本)的项目,我在控制台中出现以下错误:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: t
http://errors.angularjs.org/1.6.4/ $injector/unpr?p0=t
我请求你们的帮助。