Не могу загрузить сову-карусель с веб-пакетом 4 - PullRequest
0 голосов
/ 16 мая 2018

Я следовал инструкциям в readme для установки 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
            })
        ])
    }
};
...