运行webpack-dev-server工作正常：
webpack-dev-server --inline --hot
但不是构建：
rm -rf static && cross-env NODE_ENV=production webpack -p
package.json
├─ angular-animate@1.5.11
├─ angular-cookies@1.5.11
├─ angular-file-saver@1.1.3
├─ angular-gettext@2.2.1
├─ angular-gravatar@0.4.2
├─ angular-i18n@1.5.11
├─ angular-messages@1.5.11
├─ angular-mocks@1.5.11
├─ angular-resource@1.5.11
├─ angular-sanitize@1.5.11
├─ angular-smart-table@2.1.8
├─ angular-ui-bootstrap@2.3.2
├─ angular-ui-calendar@1.0.2
├─ angular-ui-router@0.3.2
├─ angular@1.5.11
├─ …
├─ webpack-dev-server@2.3.0
├─ webpack@2.2.1
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, './static'),
publicPath: '/static/',
filename: '[name]-[hash:8].min.js'
},
plugins: [
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.moment': 'moment',
Util: 'exports-loader?Util!bootstrap/js/dist/util'
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src', 'index.html'),
filename: path.resolve(__dirname, 'index.html'),
alwaysWriteToDisk: true
}),
new HtmlWebpackHarddiskPlugin()
],
resolve: {
modules: [
path.join(__dirname, 'src'),
'node_modules'
]
},
module: {
rules: [
{test: /.css$/, use: ['style-loader', 'css-loader']},
{test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
{test: /.html$/, use: ['html-loader']},
]
},
devServer: {
port: 8080,
proxy: {
'/api': {
target: {
host: '0.0.0.0',
protocol: 'http:',
port: 8000
}
}
}
}
};
app.js
'use strict';
var angular = require('angular');
var ngResource = require('angular-resource');
require('angular-ui-router');
angular.module('app', [ ngResource])
.value('User', {}) // global object
require('./services/api.service.js');
require('./services/auth.service.js');
require('./routes.js');
require('./pages/login/login.js');
错误
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: e
问题
发生了什么事？我如何使我的构建工作？
我用 ng-annotate-loader：
安装
npm install --dev ng-annotate-loader
配置WebPack
将此行添加到module.rules：
{test: /src.*.js$/, use: ['ng-annotate-loader']}
完整代码
webpackconst webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, './static'),
publicPath: '/static/',
filename: '[name]-[hash:8].min.js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
moment: 'moment',
'window.moment': 'moment',
Util: 'exports-loader?Util!bootstrap/js/dist/util'
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src', 'index.html'),
filename: path.resolve(__dirname, 'index.html'),
alwaysWriteToDisk: true
}),
new HtmlWebpackHarddiskPlugin()
],
resolve: {
modules: [
path.join(__dirname, 'src'),
'node_modules'
],
alias: {
Services: path.resolve(__dirname, 'src/services/')
}
},
module: {
rules: [
{test: /.css$/, use: ['style-loader', 'css-loader']},
{test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
{test: /.html$/, use: ['html-loader']},
{test: /src.*.js$/, use: ['ng-annotate-loader']},
{test: /.woff(?v=d+.d+.d+)?$/, use: ['url-loader?limit=8192&mimetype=application/font-woff']},
{test: /.woff2(?v=d+.d+.d+)?$/, use: ['url-loader?limit=8192&mimetype=application/font-woff']},
{test: /.ttf(?v=d+.d+.d+)?$/, use: ['url-loader?limit=8192&mimetype=application/octet-stream']},
{test: /.eot(?v=d+.d+.d+)?$/, use: ['file-loader']},
{test: /.svg(?v=d+.d+.d+)?$/, use: ['url-loader?limit=8192&mimetype=image/svg+xml']}
]
},
devServer: {
port: 8080,
proxy: {
'/api': {
target: {
host: '0.0.0.0',
protocol: 'http:',
port: 8000
}
}
}
}
};
{
"version": "1.27.5",
"scripts": {
"build": "rm -rf static && cross-env NODE_ENV=production webpack --display-error-details --progress --hide-modules",
"dev": "webpack-dev-server --inline --hot",
"test": "node node_modules/karma/bin/karma start ./karma.conf.js --single-run",
"test:watch": "node node_modules/karma/bin/karma start ./karma.conf.js --auto-watch",
"lint": "xo"
},
"dependencies": {
"angular": "1.5.x",
"angular-animate": "1.5.x",
"angular-cookies": "1.5.x",
"angular-file-saver": "1.1.x",
"angular-gettext": "2.2.x",
"angular-gravatar": "0.4.x",
"angular-i18n": "1.5.x",
"angular-messages": "1.5.x",
"angular-resource": "1.5.x",
"angular-sanitize": "1.5.x",
"angular-smart-table": "2.1.x",
"angular-ui-bootstrap": "2.3.x",
"angular-ui-calendar": "1.0.x",
"angular-ui-router": "0.3.x",
"bootstrap": "4.0.0-alpha.5",
"font-awesome": "4.x.x",
"fullcalendar": "3.x.x",
"hint.css": "2.4.x",
"jasmine": "2.5.x",
"jquery": "3.x.x",
"moment": "2.x.x",
"moment-weekday-calc": "1.1.x",
"tether": "1.x.x",
"toastr": "2.x.x"
},
"devDependencies": {
"angular-mocks": "1.5.x",
"chai": "3.5.x",
"chalk": "1.1.x",
"cross-env": "3.1.x",
"css-loader": "0.26.x",
"del": "0.1.x",
"eslint": "3.x.x",
"eslint-config-angular": "0.5.x",
"eslint-plugin-angular": "1.6.1",
"eslint-plugin-jasmine": "2.2.x",
"exports-loader": "0.6.x",
"file-loader": "0.10.0",
"flatpickr": "2.3.x",
"html-loader": "0.4.x",
"html-webpack-harddisk-plugin": "0.0.x",
"html-webpack-plugin": "2.28.x",
"karma": "1.x.x",
"karma-chai": "0.1.x",
"karma-jasmine": "1.x.x",
"karma-mocha": "1.x.x",
"karma-phantomjs-launcher": "1.0.x",
"karma-webpack": "2.0.x",
"mocha": "3.2.x",
"ng-annotate-loader": "0.2.x",
"node-sass": "4.5.x",
"phantomjs-polyfill-find": "ptim/phantomjs-polyfill-find",
"phantomjs-prebuilt": "2.1.x",
"sass-loader": "5.x.x",
"style-loader": "0.13.x",
"url-loader": "0.5.x",
"webpack": "2.2.x",
"webpack-dev-server": "2.3.x",
"xo": "0.17.x",
"yargs": "6.6.0"
},
"xo": {
"envs": [
"browser"
],
"globals": [
"angular"
]
}
}