我开始将我的角度应用程序迁移到webpack。我有一个文件结构如下:
- app/
------ app.js
------ index.html
- lib/
----- angular.js
----- jquery.js
----- ...
- webpack.config.js
由于限制,我无法使用npm来安装库。我的所有库文件都位于lib
和其他文件夹中。我的webpack配置如下所示:
var webpack = require('webpack'),
path = require('path');
module.exports = {
context: __dirname,
entry: {
app: [ './app/app.js'],
vendors: ['angular']
},
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
resolve: {
alias: {
angular: __dirname + "/lib/angular"
}
},
debug: false,
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"},
{
test: /\.png$/,
loader: "url-loader?limit=100000"},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.json/,
loader: 'json'
}
]
},
plugins: [
new webpack.ProvidePlugin({
angular: "angular"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
]
}
我收到错误
angular.js?848f:80Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
app.js
如下所示
angular.module("myApp", [])
.controller("myCtrl", function(){ ... });
感谢您的帮助!
答案 0 :(得分:1)
首先,在您的条目中修复拼写错误vendor
而不是vendors
。它应与 CommonsChunkPlugin
entry: {
app: [ './app/app.js'],
vendor: ['angular']
},
其次,删除 ProvidePlugin
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
]
现在它应该有效。
但实际上,我不知道用webpack加载外部库是否正确。 (Webpack对我来说是超级黑盒子,gulp更容易预测)。所以现在它有效,但没有适当的DI。