N
N
Nikita Kit2019-06-10 22:06:15
webpack
Nikita Kit, 2019-06-10 22:06:15

Why aren't client dependencies resolved in webpack 4?

Here is the config, I didn't write it, I just need to put Vue into the existing system in order to migrate some of the functionality. But webpack doesn't want to look for any dependencies. Ignores even resolve alias. Advise where to dig?
nodev9.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']
        })
    ]
};

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question