ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Почему не резолвятся клиентские зависимости в webpack 4?

Вот конфиг, его писал не я, мне нужно только поставить Vue в существующую систему, чтобы провести миграцию части функционала. Но вебпак не хочет искать никаких зависимостей. Игнорирует даже resolve alias. Посоветуйте, куда копать?
node v9.2.1
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const PolyfillInjectorPlugin = require('webpack-polyfill-injector');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const postcss = {
    import_: require('postcss-import'),
    presetenv: require('postcss-preset-env'),
    cssnano: require('cssnano'),
    mqpacker: require('css-mqpacker')
};

/*const resources = './bootstrap/';
const builds = './builds/';
const paths = {
    src: path.resolve(__dirname + resources , 'src'),
    dist: path.resolve(__dirname + builds, 'dist'),
    pub: '/'
};*/

const NODE_ENV = process.env.NODE_ENV || 'development';
const isDev = NODE_ENV === 'development';

let postcssPlugins = [
    postcss.import_(),
    postcss.presetenv(),
    postcss.mqpacker({sort: true})
];

if (!isDev) postcssPlugins.push(postcss.cssnano());

module.exports = {
    //context: __dirname,
    mode: NODE_ENV || 'development',
    devtool: isDev ? 'source-map' : false,
    entry: {
        app: "webpack-polyfill-injector?" + JSON.stringify({modules: ['./app.ts']}) + "!"
    },
    output: {
        path: __dirname + '/dist',//path.join(__dirname, './dist')
        publicPath: __dirname,//path.join(__dirname, './dist')
        filename: '[name].build.js'
    },
    resolve: {
        extensions: ['.ts', '.scss', '.css', '.pug', '.mustache', '.js'],
        alias: {
            tslib$: path.resolve(__dirname, 'js/lib/tslib.es6.js'),
            jquerytouchswipe: 'jquery-touchswipe',
            vue: 'vue/dist/vue.min.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.mustache$/,
                use: [
                    {
                        loader: 'mustache-loader',
                        options: {tiny: true}
                    }
                ]
            },
            {
                test: /\.ts$/,
                loaders: ['ts-loader']
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use:  [
                    { loader: MiniCssExtractPlugin.loader },
                    {
                        loader: 'css-loader',
                        options: { sourceMap: isDev }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: postcssPlugins,
                            sourceMap: isDev
                        }
                    },
                    { loader: 'resolve-url-loader' },
                    { loader: 'sass-loader', options: { sourceMap: true } }, // force to `true` for resolve-url-loader
                ]
            },
            {
                test: /\.(png|jpg|ttf|eot|woff|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]'
                    }
                }]
            },
            {
                test: /\.pug$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].html'
                        }
                    },
                    {
                        loader: 'pug-html-loader',
                        options: {
                            pretty: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            server: { baseDir: ['dist'] }
        }),
        new CopyPlugin([
            { from: __dirname + '/pics', to: __dirname + '/dist/pics' }
        ]),
        new CleanWebpackPlugin(['dist'], {}),
        new webpack.DefinePlugin({
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            'DEVELOPMENT': JSON.stringify(isDev)
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css' ,
            chunkFilename: '[id].css'
        }),
        new PolyfillInjectorPlugin({
            polyfills: [
                'Promise'
            ]
        }),
        new BundleAnalyzerPlugin({ openAnalyzer: true, startAnalyzer: false }),
        new webpack.ProvidePlugin({
            __assign: ['tslib', '__assign'],
            __extends: ['tslib', '__extends']
        })
    ]
};
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы