我正在尝试将使用RequireJS的应用程序迁移到Webpack，并且现有模块存在问题。
以下是应用程序的文件夹结构：
App
--js
----custom
----lib
----app.build.js
----config.js
----app-loader.coffee
lib 和自定义文件夹包含不同的模块
app.build.js 文件：
({
appDir: ".",
baseUrl: ".",
dir: "../build",
findNestedDependencies: true,
mainConfigFile: 'config.js',
modules: [
{
name: "app-loader",
include: ["domReady"]
}
],
optimize: "uglify",
optimizeCss: "none",
pragmas: {
logExclude: true
}
});
config.js ：
(function () {
require.config({
paths: {
'bootstrap': 'lib/bootstrap/dist/js/bootstrap',
'domReady': 'lib/domReady/domReady',
'jquery': 'lib/jquery/jquery.min',
'jquery-bbq': 'lib/jquery-bbq/jquery.ba-bbq.min',
'jquery.browser': 'lib/jquery.browser/dist/jquery.browser',
'jquery.chosen': 'lib/chosen/chosen.jquery.min',
'jquery.cookie': 'lib/jquery.cookie/jquery.cookie',
'jquery.colorpicker': 'lib/jQuery-ColorPicker/colorpicker.min',
'jquery.fileupload': 'lib/blueimp-file-upload/js/jquery.fileupload',
'jquery-mobile': 'lib/jquery-mobile-bower/js/jquery.mobile-1.3.2.min',
'jquery.scrollTo': 'lib/jquery.scrollTo/jquery.scrollTo.min',
'jquery.tagsinput': 'lib/jquery.tagsinput/src/jquery.tagsinput',
'jquery.tablednd': 'lib/TableDnD/js/jquery.tablednd',
'jquery.ui': 'lib/jquery-ui/jquery-ui',
'jquery.ui.widget': 'lib/blueimp-file-upload/js/vendor/jquery.ui.widget',
'jquery.validate': 'lib/jquery-validation/dist/jquery.validate',
'json2': 'lib/JSON-js/json2',
'swfobject': 'lib/swfobject/swfobject/swfobject',
'sugar': 'lib/sugar/release/sugar.min',
'underscore': 'lib/underscore/underscore-min'
},
packages: [
],
shim: {
"bootstrap": { "deps": ['jquery'] },
'jquery-bbq': {
deps: ['jquery.browser']
},
'jquery.cookie': {
deps: ['jquery'],
exports: 'jquery.cookie'
},
'jquery.colorpicker': {
deps: ['jquery']
},
'jquery.tablednd': {
deps: ['jquery']
},
'json2': {
deps: ['jquery'],
exports: 'JSON'
},
'swfobject': {
exports: 'swfobject'
},
'underscore': {
exports: '_'
}
}
});
}).call(this);
app-loader.coffee ：
equire ['config'], ->
require ['jquery.ui', 'jquery.validate'], ->
_appDeveloper?()
require [
'custom/application/footer'
'custom/application/floatingwindow'
'custom/application/join'
'custom/application/login'
'custom/application/main'
'custom/application/menu'
'custom/application/message'
'custom/application/topmenu'
]
我的 webpack.config.js ：
var webpack = require('webpack'),
path = require('path'),
glob = require('glob');
var config = {
context: __dirname + 'App/js',
entry: {
app: 'app-loader.coffee'
},
output: {
path: __dirname + '/public/js',
filename: '[name].js',
chunkFilename: '[id].[name].js'
},
plugins: [
new webpack.ProvidePlugin({
_: 'underscore',
$: 'jquery'
})
],
module: {
loaders: [
{test: /bootstrap/, loader: 'imports?jquery'},
{test: /jquery-bbq/, loader: 'imports?jquery.browser'},
{test: /jquery.cookie/, loader: 'exports?jquery.cookie!imports?jquery'},
{test: /jquery.colorpicker/, loader: 'imports?jquery'},
{test: /jquery.tablednd/, loader: 'imports?jquery'},
{test: /json2/, loader: 'exports?JSON!imports?jquery'},
{test: /swfobject/, loader: 'exports?swfobject'},
{test: /\.coffee$/, loader: 'coffee-loader'}
]
},
resolve: {
extensions: ['', '.coffee', '.js'],
root: [__dirname + '/App/js'],
alias: {
'bootstrap': 'lib/bootstrap/dist/js/bootstrap',
'domReady': 'lib/domReady/domReady',
'jquery': 'lib/jquery/jquery.min',
'jquery-bbq': 'lib/jquery-bbq/jquery.ba-bbq.min',
'jquery.browser': 'lib/jquery.browser/dist/jquery.browser',
'jquery.chosen': 'lib/chosen/chosen.jquery.min',
'jquery.cookie': 'lib/jquery.cookie/jquery.cookie',
'jquery.colorpicker': 'lib/jQuery-ColorPicker/colorpicker.min',
'jquery.fileupload': 'lib/blueimp-file-upload/js/jquery.fileupload',
'jquery-mobile': 'lib/jquery-mobile-bower/js/jquery.mobile-1.3.2.min',
'jquery.scrollTo': 'lib/jquery.scrollTo/jquery.scrollTo.min',
'jquery.tagsinput': 'lib/jquery.tagsinput/src/jquery.tagsinput',
'jquery.tablednd': 'lib/TableDnD/js/jquery.tablednd',
'jquery.ui': 'lib/jquery-ui/jquery-ui',
'jquery.ui.widget': 'lib/blueimp-file-upload/js/vendor/jquery.ui.widget',
'jquery.validate': 'lib/jquery-validation/dist/jquery.validate',
'json2': 'lib/JSON-js/json2',
'swfobject': 'lib/swfobject/swfobject/swfobject',
'sugar': 'lib/sugar/release/sugar.min',
'underscore': 'lib/underscore/underscore-min'
}
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
}
};
module.exports = config;
我一跑webpack，就会收到以下错误消息：
ERROR in /Users/user/project/App/js/app-loader.coffee
Module not found: Error: Cannot resolve module 'jquery
validation/dist/jquery.validate' in /Users/user/project/App/js
@ /Users/user/project/App/js/app-loader.coffee 2:9-7:4
ERROR in /Users/user/project/App/js/app-loader.coffee
Module not found: Error: Cannot resolve module 'jquery-ui/jquery-ui'
in /Users/user/project/App/js
@ /Users/user/project/App/js/app-loader.coffee 2:9-7:4
ERROR in /Users/user/project/App/js/custom/random/join.coffee
Module not found: Error: Cannot resolve module 'jquery-
validation/dist/jquery.validate' in
/Users/user/project/App/js/custom/random
@ /Users/user/project/App/js/custom/random/join.coffee 1:0-64:2
不确定我在webpack的配置文件中还缺少什么......
答案 0 :(得分：3)
根据@Tom Chen的评论，我能够进一步深入了解我的配置并通过添加Node和＆＃39; Bower＆＃39;来解决它。配置文件的resolve.modulesDirectories部分中的模块。
以下是我的 Webpack.config.js 文件：
var webpack = require('webpack'),
path = require('path'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
var plugins = [
new webpack.ProvidePlugin({
'_': 'underscore',
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new ExtractTextPlugin(__dirname + '/Content/css/[name].css'),
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= */"vendor", /* filename= */"vendor.js"
),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
];
if (process.env.NODE_ENV === 'production') {
var optPlugins = [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true
})
];
plugins = plugins.concat(optPlugins);
}
var config = {
context: __dirname + '/App/js',
entry: {
app: 'app-loader.coffee',
vendor: [
'bootstrap',
'underscore',
'jquery',
'jquery-bbq',
'jquery.chosen',
'jquery.browser',
'jquery.cookie',
'jquery.colorpicker',
'jquery.fileupload',
'jquery.scrollTo',
'jquery.tagsinput',
'jquery.tablednd',
'jquery.ui',
'jquery.ui.widget',
'jquery.validate',
'json2',
'swfobject',
'sugar'
]
},
output: {
path: __dirname + '/Content/js',
filename: 'app-loader.js'
},
amd: {
jQuery: true
},
node: {
fs: 'empty'
},
module: {
loaders: [
{ test: /bootstrap/, loader: 'imports?jQuery=jquery' },
{ test: /jquery.cookie/, loader: 'exports?jquery.cookie!imports?jquery' },
{ test: /jquery.colorpicker/, loader: 'imports?jquery' },
{ test: /jquery.tablednd/, loader: 'imports?jquery' },
{ test: /json2/, loader: 'exports?JSON!imports?jquery' },
{ test: /swfobject/, loader: 'exports?swfobject' },
{ test: /\.coffee$/, loader: 'coffee-loader' },
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader'
)
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'!css-loader!sass-loader'
)
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader!less-loader'
)
}
]
},
plugins: plugins,
resolve: {
extensions: ['', '.coffee', '.js', '.json'],
root: [path.resolve(__dirname + '/App/js')],
alias: {
'jquery': 'jquery/jquery',
'jquery-bbq': 'jquery-bbq/jquery.ba-bbq',
'jquery.cookie': 'jquery.cookie/jquery.cookie',
'jquery.chosen': 'chosen/chosen.jquery.min',
'jquery.colorpicker': 'jQuery-ColorPicker/colorpicker',
'jquery.fileupload': 'blueimp-file-upload/js/jquery.fileupload',
'jquery.scrollTo': 'jquery.scrollto/jquery.scrollTo',
'jquery.tagsinput': 'jquery-tags-input/src/jquery.tagsinput',
'jquery.tablednd': 'TableDnD/js/jquery.tablednd',
'jquery.ui': 'jquery-ui/jquery-ui',
'jquery.ui.widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget',
'jquery.validate': 'jquery-validation/dist/jquery.validate',
'json2': 'JSON-js/json2'
},
modulesDirectories: [
'node_modules',
'bower_components'
],
bail: true,
stats: {
colors: true,
modules: true,
reasons: true
}
}
};
module.exports = config;
答案 1 :(得分：1)
从webpack的错误消息中，我相信你错过了一些依赖项。将这些内容添加到resolve.alias对象可能会有所帮助：
'jqueryvalidation/dist/jquery.validate', 'jquery-ui/jquery-ui',