我是webpack的新手,但我开始在我的一个项目中使用它来了解它.
我想在引导程序中使用jQuery,但是,当我启动应用程序时,我收到以下错误:
bootstrap.min.js?5802:6Uncaught Error: Bootstrap’s JavaScript requires jQuery
在我的webpack配置中,我定义了两个入口点,一个用于项目库,一个用于外部源,称为供应商,如jQuery,Bootstrap等.
在供应商中,我已经在jQuery库之后定义了Bootstrap库,但我无法摆脱错误.我缺少的任何线索?
这是我的webapp配置:
import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import autoprefixer from 'autoprefixer'; let node_dir = __dirname + '/node_modules'; export default { resolve: { extensions: ['','.js','.jsx'],alias: { 'jquery': node_dir + '/jquery/dist/jquery.js','jquery-validation': node_dir + '/jquery-validation/dist/jquery.validate.js','bootstrap': node_dir + '/bootstrap/dist/js/bootstrap.min.js' } },debug: true,devtool: 'cheap-module-eval-source-map',// more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool noInfo: true,// set to false to see a list of every file being bundled. entry: { // must be first entry to properly set public path app: ['./src/webpack-public-path','webpack-hot-middleware/client?reload=true','./src/index'],vendors: ['jquery','jquery-validation','bootstrap'] },target: 'web',// necessary per https://webpack.github.io/docs/testing.html#compile-and-test output: { path: `${__dirname}/src`,// Note: Physical files are only output by the production build task `npm run build`. publicPath: '/',filename: 'bundle.js' },plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development'),// Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom) __DEV__: true }),new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS. //template: 'src/index.ejs',template: 'src/index.html',minify: { removeComments: true,collapseWhitespace: true },inject: true }),new webpack.ProvidePlugin({ $: "jquery",jquery: "jquery","windows.jQuery": "jquery" }),new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js',Infinity) ],module: { loaders: [ {test: /\.jsx?$/,exclude: /node_modules/,loaders: ['babel']},{test: /\.eot(\?v=\d+.\d+.\d+)?$/,loader: 'file'},{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: "url?limit=10000&mimetype=application/font-woff"},{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,loader: 'url?limit=10000&mimetype=application/octet-stream'},{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,loader: 'url?limit=10000&mimetype=image/svg+xml'},{test: /\.(jpe?g|png|gif)$/i,loader: 'file?name=[name].[ext]'},{test: /\.ico$/,{test: /(\.css|\.scss)$/,loaders: ['style','css?sourceMap','postcss','sass?sourceMap']} ] },postcss: ()=> [autoprefixer] };
这是我的package.json文件:
{ "name": "dario-webapplication","version": "1.0.0","description": "Webapplication for Dario project","engines": { "npm": ">=3" },"scripts": { "preinstall": "node tools/nodeVersionCheck.js","setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js","remove-demo": "babel-node tools/removeDemo.js","start-message": "babel-node tools/startMessage.js","prestart": "npm-run-all --parallel start-message remove-dist","start": "npm-run-all --parallel open:src lint:watch","open:src": "babel-node tools/srcServer.js","open:dist": "babel-node tools/distServer.js","lint": "esw webpack.config.* src tools --color","lint:watch": "npm run lint -- --watch","clean-dist": "npm run remove-dist && mkdir dist","remove-dist": "rimraf ./dist","prebuild": "npm run clean-dist && npm run lint && npm run test","build": "babel-node tools/build.js && npm run open:dist","test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress","test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress","test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js","test:watch": "npm run test -- --watch","open:cover": "npm run test:cover && open coverage/index.html" },"author": "Francisco Jose Parra Gonzalez","license": "MIT","dependencies": { "bootstrap": "3.3.7","jquery": "2.1.4","jquery-validation": "1.15.1","object-assign": "4.1.0","react": "15.3.0","react-bootstrap": "0.30.3","react-dom": "15.3.0","react-redux": "4.4.5","react-router": "2.6.1","react-router-redux": "4.0.5","redux": "3.5.2","redux-thunk": "2.1.0" },"devDependencies": { "autoprefixer": "6.4.0","babel-cli": "6.11.4","babel-core": "6.11.4","babel-loader": "6.2.4","babel-plugin-react-display-name": "2.0.0","babel-plugin-transform-react-remove-prop-types": "0.2.9","babel-preset-es2015": "6.9.0","babel-preset-react": "6.11.1","babel-preset-react-hmre": "1.1.1","babel-preset-stage-1": "6.5.0","babel-register": "6.11.6","browser-sync": "2.14.0","chai": "3.5.0","chalk": "1.1.3","connect-history-api-fallback": "1.2.0","coveralls": "2.11.12","cross-env": "2.0.0","css-loader": "0.23.1","enzyme": "2.4.1","eslint": "3.2.2","eslint-plugin-import": "1.12.0","eslint-plugin-jsx-a11y": "2.0.1","eslint-plugin-react": "6.0.0","eslint-watch": "2.1.14","extract-text-webpack-plugin": "1.0.1","file-loader": "0.9.0","html-webpack-plugin": "2.22.0","isparta": "4.0.0","mocha": "3.0.1","mockdate": "1.0.4","node-sass": "3.8.0","npm-run-all": "2.3.0","open": "0.0.5","postcss-loader": "0.9.1","prompt": "1.0.0","react-addons-test-utils": "15.3.0","redux-immutable-state-invariant": "1.2.3","replace": "0.3.0","rimraf": "2.5.4","sass-loader": "4.0.0","sinon": "1.17.5","sinon-chai": "2.8.0","style-loader": "0.13.1","url-loader": "0.5.7","webpack": "1.13.1","webpack-dev-middleware": "1.6.1","webpack-hot-middleware": "2.12.2","webpack-md5-hash": "0.0.5" },"keywords": [],"repository": { "type": "git","url": "" } }