Question

我按照readme中的说明安装了猫头鹰：

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
            })
        ])
    }
};

Answer 1

导入“owl.carousel”；像这样重写包猫头鹰旋转木马

无法使用webpack 4加载owl-carousel

1 个答案: