jquery - 无法使用 webpack 4 加载 owl-carousel
问题描述
我按照自述文件中的说明安装 owl:
npm install owl-carousel --save-dev
将其包含在 webpack.config.js 的插件部分中:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
并将其添加到我的条目文件(index.js)
import "jquery";
import "bootstrap";
import "owl.carousel";
但它没有找到它。当我尝试构建时,我得到:
ERROR in ./src/index.js
Module not found: Error: Can't resolve 'owl.carousel' in '/Volumes/Home/Sites/mysite/src'
@ ./src/index.js 19:0-23
@ multi ./src/index.js
我也尝试import "owl-carousel";
过同样的结果。它正在加载 jquery 和 bootstrap,它们也是节点模块,所以我认为这不是一个解决问题。
我正在使用 webpack 4
更新这里是我的 webpack.config.js
// webpack v4
//process.traceDeprecation = true
const webpack = require('webpack');
const path = require('path');
const glob = require('glob-all');
const assets = path.resolve(__dirname, 'flask_app/static');
const templates = path.resolve(__dirname, 'flask_app/templates');
const { getIfUtils,removeEmpty } = require('webpack-config-utils');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { ifProduction, ifNotProduction } = getIfUtils(process.argv[3]);
console.log("IFPRODUCTION", ifProduction());
console.log("IFNOTPRODUCTION", ifNotProduction());
module.exports = (env, argv) => {
const devMode = argv.mode !== 'production';
console.log("DEVMODE", devMode);
return {
watch: false,
entry: [
'./src/index.js'
],
output: {
path: assets,
filename: '[name].[chunkhash].js'
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
enforce: 'pre',
use: [{
loader: 'eslint-loader',
options: {
emitWarning: true,
}
},
{
loader: "babel-loader",
options: {
presets: [
['env']
]
}
}
]
},
// {
// test: /\.min\.js$/,
// loader: 'imports-loader?jQuery=jquery,$=jquery,this=>window'
// },
{
test: /\.s?[ac]ss$/,
use: [{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
//url: false,
sourceMap: ifNotProduction(),
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: ifNotProduction(),
plugins: () =>
ifProduction([
require('autoprefixer')({
preset: 'default',
}),
require('cssnano'),
require("css-mqpacker")
], [
require('autoprefixer')({
preset: 'default',
}),
require("css-mqpacker")
])
}
},
{
loader: 'sass-loader',
options: {
sourceMap: ifNotProduction(),
},
}
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
sourceMap: ifNotProduction(),
compress: {
drop_console: true
}
}
})
]
},
plugins: removeEmpty([
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new VueLoaderPlugin(),
new CleanWebpackPlugin('flask_app/static', {}),
new MiniCssExtractPlugin({
filename: devMode ? 'style.css' : 'style.[chunkhash].css',
}),
new HtmlWebpackPlugin({
hash: true,
template: './src/store_layout.html.j2',
filename: `${templates}/store_layout.html.j2`
}),
ifProduction(new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, 'src/*.html'),
path.join(__dirname, 'src/*.html.j2'),
path.join(__dirname, 'src/site/*.html'),
path.join(__dirname, 'src/site/*.html.j2'),
path.join(__dirname, 'src/*.js')
]),
})),
new CopyWebpackPlugin([{
from: 'src/img',
to: 'img'
}]),
new CopyWebpackPlugin([{
from: 'src/site',
to: `${templates}/site`
}]),
new StyleLintPlugin({
configFile: '.stylelintrc',
context: './src',
files: '**/*.s?[ac]ss',
failOnError: true
})
])
}
};
解决方案
导入“owl.carousel”;像这样重写 packa owl-carousel
推荐阅读
- javascript - 原子异步/等待调用 - 如果第二个失败,是否可以不先执行?
- ibm-mq - Apache qpid 客户端到 IBM MQ Broker v 9.1.0.6 + 请求 - 使用队列的回复模式,不起作用
- signalr - SignalR Websocket 未收到消息
- javascript - 正则表达式的编辑
- angular - Nativescript Image-picker 在外部存储中找不到文件
- spring - 何时使用 SpringBoot 执行器?
- java - Spring Boot 使用调度程序使用 Web 服务
- react-native - 将 Stripe 实现为 react native 时出现 return_url 的错误
- php - How to save Gravity form data for non-logged in user
- oracle - Oracle DB:数据显示为#