我正在使用webpack 2.2.0重新配置我的项目。首先,配置代码显示
var isTest = false;
var isProd = true;
我将其更新为
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
,现在它成功编译了webpack,但最终输出(即localhost给我错误
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.core due to:
Error: [$injector:strictdi] appConfigCore is not using explicit annotation and cannot be invoked in strict mode
任何人都可以帮助解决此错误,我是angularjs的新手。
我还要附加代码和Webpack配置。
var angular = require('angular');
var async = require('async');
var _ = require('underscore');
var AWS = require('aws-sdk');
require('angular-drag-and-drop-lists/angular-drag-and-drop-lists.min.js');
require('angular-ui-router');
require('angular-ui-bootstrap/dist/ui-bootstrap-tpls.js');
require('angular-ui-bootstrap/dist/ui-bootstrap-csp.css');
require('angular-resource');
require('angular-cookies');
require('angular-animate');
require('ngstorage');
require('angular-jwt');
require('ng-infinite-scroll');
require('angular-sanitize');
require('angular-loading-bar');
require('angular-base64');
require('ng-file-upload');
require('satellizer');
require('ui-select');
require('re-tree');
require('ng-device-detector/ng-device-detector.js');
/////////////////////////////////////////////////////////////
angular.module('app.core', [
'ui.router',
'ngSanitize',
'ngAnimate',
'ui.bootstrap',
'ui.bootstrap.pagination',
'ui.select',
'ngResource',
'ngStorage',
'angular-jwt',
'infinite-scroll',
'base64',
'angular-loading-bar',
'ngTable',
'ui.bootstrap',
'ngFileUpload',
'angular-bind-html-compile',
'mm.acl',
'satellizer',
'rzModule',
'ngMaterial',
'dndLists',
'720kb.socialshare',
'directive.g+signin',
'ngCookies'
])
.config(appConfigCore)
.filter('capitalize', function() {
return function(input) {
return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
}
});
function appConfigCore($stateProvider, $authProvider, $httpProvider, $locationProvider, $urlRouterProvider, $resourceProvider, $localStorageProvider) {
"ngInject";
$resourceProvider.defaults.stripTrailingSlashes = false;
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}
'use strict';
var fs = require('fs');
var gracefulFs = require('graceful-fs');
var path = require("path");
gracefulFs.gracefulify(fs);
// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
const WebpackConfig = require('webpack-config');
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
// module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
/**
* Entry
* Reference: http://webpack.github.io/docs/configuration.html#entry
* Should be an empty object if it's generating a test build
* Karma will set this when it's a test build
*/
config.entry = isTest ? void 0 : {
app: './newsrc/app/app.js',
};
/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
* Should be an empty object if it's generating a test build
* Karma will handle setting it up for you when it's a test build
*/
config.output = isTest ? {} : {
// Absolute output directory
path: __dirname + '/dist',
// Output path from the view of the page
// Uses webpack-dev-server in development
publicPath: isProd ? '/' : 'http://localhost:8080/',
// Filename for entry points
// Only adds hash in build mode
filename: isProd ? '[name].[hash].js' : '[name].bundle.js',
// Filename for non-entry points
// Only adds hash in build mode
chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js'
};
/**
* Devtool
* Reference: http://webpack.github.io/docs/configuration.html#devtool
* Type of sourcemap to use per build type
*/
if (isTest) {
config.devtool = 'inline-source-map';
}
else if (isProd) {
config.devtool = 'source-map';
}
else {
config.devtool = 'eval-source-map';
}
/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
// Initialize module
config.module = {
rules: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
// CSS LOADER
// Reference: https://github.com/webpack/css-loader
// Allow loading css through js
//
// Reference: https://github.com/postcss/postcss-loader
// Postprocess your css with PostCSS plugins
test: /\.css$/,
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files in production builds
//
// Reference: https://github.com/webpack/style-loader
// Use style-loader in development.
loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{loader: 'css-loader', query: {sourceMap: true}},
{loader: 'postcss-loader'}
],
})
}, {
test: /\.(eot|otf|woff|woff2|ttf|svg)$/,
loader: 'url-loader?limit=30000&name=css/[name].[ext]'
}, {
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
// Rename the file using the asset hash
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied to your output
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'file-loader?name=img/[hash:6].[ext]'
}, {
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw-loader',
}]
};
// ISTANBUL LOADER
// https://github.com/deepsweet/istanbul-instrumenter-loader
// Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting
// Skips node_modules and files that end with .spec.js
if (isTest) {
config.module.rules.push({
enforce: 'pre',
test: /\.js$/,
exclude: [
/node_modules/,
/\.spec\.js$/
],
loader: 'istanbul-instrumenter-loader',
query: {
esModules: true
}
})
}
/**
* PostCSS
* Reference: https://github.com/postcss/autoprefixer-core
* Add vendor prefixes to your css
*/
// NOTE: This is now handled in the `postcss.config.js`
// webpack2 has some issues, making the config file necessary
/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [
new webpack.LoaderOptionsPlugin({
test: /\.scss$/i,
options: {
postcss: {
plugins: [autoprefixer]
}
}
}),
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
'window.jQuery': 'jquery',
}),
new ngAnnotatePlugin({
add: true,
prettyPrint: true
}),
];
// Skip rendering index.html in test mode
if (!isTest) {
// Reference: https://github.com/ampedandwired/html-webpack-plugin
// Render index.html
config.plugins.push(
new HtmlWebpackPlugin({
template: './newsrc/public/index.php',
inject: 'body'
}),
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files
// Disabled when in test mode or not in build mode
new ExtractTextPlugin({filename: 'css/[name].css', disable: !isProd, allChunks: true})
)
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// Dedupe modules in the output
// new webpack.optimize.DedupePlugin(),
// Chunks
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// filename: isProd ? 'vendor.[hash].bundle.js' : 'vendor.bundle.js',
// minChunks: 2,
// }),
//Remove this comment when you want to do final build. this line will minifiy vendor.js file
new webpack.optimize.UglifyJsPlugin(),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([{
from: __dirname + '/newsrc/public'
}])
)
}
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
config.devServer = {
contentBase: './newsrc/public',
stats: 'minimal'
};
module.exports = config;
// }();