jquery - 找不到模块：错误：无法解析 webpack 中的“jquery”
问题描述
/src/assets/js/core.min.js
Module not found: Error:
Can't resolve '../jquery' in 'C:\Users\mohammad\vue-webpack\src\assets\js'
@ ./src/assets/js/core.min.js 62:67-90
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Footer.vue
@ ./src/Footer.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
我在 core.min.js 中最小化了 js 文件。由于正文字符数限制，我没有显示最小化 js 文件的代码。所有导入的最小化js文件的url都在评论中提到。
要查看 core.min.js 的完整代码，请查看 https://drive.google.com/file/d/1IYcH31j2lqh96ZlNgdXr6wnqrq2HAWCK/view
核心.min.js
/**
* @module jQuery
* @author jQuery Foundation and other contributors
* @see https://code.jquery.com/jquery/
* @license MIT (jquery.org/license)
* @version 3.2.1
*/
/**
* @module jQuery Migrate
* @author jQuery Foundation and other contributors
* @see https://code.jquery.com/jquery/
* @license MIT
* @version 3.0.0
*/
/**
* @module jQuery Cookie Plugin
* @see https://github.com/carhartl/jquery-cookie
* @license MIT
*/
/**
* @module Device.js
* @see https://github.com/matthewhudson/device.js
* @license MIT
*/
/**
* @module jQuery resize event
* @see http://benalman.com/projects/jquery-resize-plugin/
* @license MIT
*/
/**
* @module jQuery easing
* @author George McGinley Smith
* @see http://gsgd.co.uk/sandbox/jquery/easing/
* @license BSD
* @version 1.4.0
*/
/**
* @module TouchSwipe
* @see https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
* @license MIT
* @version 1.6.18
*/
/**
* @module Popper.js
* @author Federico Zivolo
* @see https://github.com/FezVrasta/popper.js
* @license MIT
* @version 1.14.3
*/
/**
* @module Bootstrap
* @author Twitter, Inc.
* @see http://getbootstrap.com
* @license MIT
* @version 4.1.3
*/
/**
* @module Regula
* @description An annotation-based form-validation framework in Javascript
* @license BSD
* @version 1.3.4
* @copyright Robert Nyman, http://www.robertnyman.com
*/
/**
* @module Form
* @version 3.51
* @author M. Alsup
* @see {@link http://malsup.com/jquery/form}
* @see {@link https://github.com/jquery-form/form}
* @license MIT and GPL
* @requires module:jQuery
*/
/**
* @module RDInputLabel
* @author Evgeniy Gusarov
* @license MIT
*/
/**
* @module RD FilePicker
* @author Aleksey Patsurkovskiy
* @version 1.0.2
* @license MIT
* @link http://cms.devoffice.com/coding-demo/mnemon1k/rd-filepicker/demo/
*/
/**
* @module Owl carousel
* @version 2.2.1
* @author Bartosz Wojciechowski
* @license MIT
*/
/**
* @module Isotope PACKAGED
* @license GPLv3
* @see http://isotope.metafizzy.co
* @version 2.2.2
*/
/**
* @module RD Navbar
* @author Evgeniy Gusarov
* @see https://ua.linkedin.com/pub/evgeniy-gusarov/8a/a40/54a
* @version 2.2.5
*/
/**
* @module UIToTop
* @author Matt Varone
* @see http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
* @license MIT
*/
/**
* @module Materianize Parallax
* @see http://materializecss.com/parallax-demo.html
* @licesne MIT
*/
/**
* @module Swiper
* @description Most modern mobile touch slider and framework with hardware accelerated transitions
* @author Vladimir Kharlampidi
* @see http://www.idangero.us/swiper/
* @licesne MIT
* @version 4.1.0
*/
/**
* @module Lightgallery
* @author Sachin N
* @see http://sachinchoolur.github.io/lightGallery/
* @license GPLv3
* @version 1.6.2 - 2017-10-03
*/
/**
* @module WOW
* @author Matthieu Aussaguel
* @license MIT
* @version 1.1.3
*/
/**
* @module PageTransition
* @author Roman Kravchuk (JeremyLuis)
* @license MIT
* @version 1.1.3
* @description Smooth transition between pages
* @requires module:jQuery
*/
/**
* @module Select2
* @see https://github.com/select2/select2/blob/master/
* @license MIT
* @version 3.5.4
*/
/**
* @module Slick
* @author Ken Wheeler
* @see http://kenwheeler.github.io/slick
* @version 1.6.0
*/
/**
* @module Stepper
* @version 3.0.8
* @license MIT
* @link http://classic.formstone.it/stepper/
*/
/**
* @module CustomEvent polyfill
*/
/**
* @module MultiToggles
* @author ATOM
* @license MIT
* @see https://codepen.io/OXAYAZA/pen/eRbYjV
* @version 2.0.0
* @description Allows you to use multiple toggles to switch class "active" on the target,
* itself and other toggles linked to the same target.
*/
/**
* @module RD Range
* @author Roman Kholiavko
* @see http://cms.devoffice.com/coding-demo/marathoner/rd-range/documentation
* @version 1.0
*/
/**
* @module jQuery Mousewheel
* @license MIT
* @version 3.1.13
*/
/**
* @module jQuery Mousewheel
* @author 2014 Kelvin Luck & 2017-2018 Tuukka Pasanen
* @see http://jscrollpane.kelvinluck.com/
* @license Dual licensed under the MIT or GPL licenses.
* @version 2.1.2-rc.1
*/
/**
* @module αUtil
* @version v1.0.1
* @desc Service functions for α-modules
* @author OXAYAZA {@link https://github.com/OXAYAZA}
* @license CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
* @see {@link https://www.linkedin.com/in/%D1%8E%D1%80%D0%B8%D0%B9-%D0%B1%D0%B0%D0%B7%D0%B0%D0%B5%D0%B2-166479165/}
*/
/**
* @module αCounter
* @version v0.1.1
* @author OXAYAZA {@link https://github.com/OXAYAZA}
* @license CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
* @requires module:αUtil
* @see {@link https://oxayaza.page.link/gitHub_aCounters}
*/
/**
* @module αProgressCircle
* @version v0.1.1
* @author OXAYAZA {@link https://github.com/OXAYAZA}
* @license CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
* @requires module:αUtil
* @see {@link https://oxayaza.page.link/gitHub_aCounters}
*/
/**
* @module αCountdown
* @version v0.1.1
* @author OXAYAZA {@link https://github.com/OXAYAZA}
* @license CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
* @requires module:αUtil
* @requires module:αProgressCircle
* @see {@link https://oxayaza.page.link/gitHub_aCounters}
*/
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(woff|woff2|ttf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
limit: 10000/*,
mimetype: 'application/octet-stream'*/
}
}
]
}
],
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
main.js
import Vue from 'vue';
import App from './App.vue';
import Header from './Header.vue';
import Home from './Home.vue';
import Footer from './Footer.vue';
Vue.component('app-header',Header);
Vue.component('app-home',Home);
Vue.component('app-footer',Footer);
new Vue({
el: '#app',
render: h => h(App)
});
我在 Footer.vue 中导入 core.min.js：
<!-- Page Footer-->
<!-- Pre footer section-->
<template>
<div>
Test
</div>
</template>
<script>
import "./assets/js/core.min.js";
</script>
export default {
name: 'Footer'
}
应用程序.vue
<template>
<div id="app">
<div class="page">
<app-header></app-header>
<app-home></app-home>
<app-footer></app-footer>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
@import '//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900%7CRoboto:300,400,500,700,900';
@import './assets/css/style.css';
@import './assets/css/fonts.css';
</style>
注意：所有 vue 文件中只导入 core.min.js 文件。
项目目录图片
