mike-diamond / media-query-splitting-plugin

Webpack 4 plugin for styles splitting by media query
MIT License
106 stars 17 forks source link

Error: Cannot find module 'unquote' #6

Closed yashilanka closed 5 years ago

yashilanka commented 5 years ago

$ yarn build yarn run v1.3.2 $ webpack --production (node:28964) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead Error: Cannot find module 'unquote' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15) at Function.Module._load (internal/modules/cjs/loader.js:475:25) at Module.require (internal/modules/cjs/loader.js:598:17) at require (D:\Yashi\Desktop\Webpack_test\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object. (D:\Yashi\Desktop\Webpack_test\node_modules\svgo\plugins\prefixIds.js:17:15) at Module._compile (D:\Yashi\Desktop\Webpack_test\node_modules\v8-compile-cache\v8-compile-cache.js:178:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10) at Module.load (internal/modules/cjs/loader.js:566:32) at tryModuleLoad (internal/modules/cjs/loader.js:506:12) at Function.Module._load (internal/modules/cjs/loader.js:498:3) at Module.require (internal/modules/cjs/loader.js:598:17) at require (D:\Yashi\Desktop\Webpack_test\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at D:\Yashi\Desktop\Webpack_test\node_modules\svgo\lib\svgo\config.js:101:40 at Array.map () at preparePluginsArray (D:\Yashi\Desktop\Webpack_test\node_modules\svgo\lib\svgo\config.js:66:20) at module.exports (D:\Yashi\Desktop\Webpack_test\node_modules\svgo\lib\svgo\config.js:30:28) at new SVGO (D:\Yashi\Desktop\Webpack_test\node_modules\svgo\lib\svgo.js:21:19) at exports.default._postcss2.default.plugin (D:\Yashi\Desktop\Webpack_test\node_modules\postcss-svgo\dist\index.js:103:18) at creator (D:\Yashi\Desktop\Webpack_test\node_modules\postcss\lib\postcss.js:133:35) at initializePlugin (D:\Yashi\Desktop\Webpack_test\node_modules\cssnano\dist\index.js:31:36) at at process._tickCallback (internal/process/next_tick.js:182:7) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.


WebPack Config File

`const path = require('path');

// Webpack Plugins const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const MediaQuerySplittingPlugin = require('media-query-splitting-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const filepath = require('./src/filepath.js'); const argv = require("yargs").argv; var isProduction = !!argv.production;

module.exports = { mode: 'production', devtool: isProduction ? ' ' : 'source-map', entry: filepath.inputPath, output: { path: filepath.fileP, filename: "bundle.min.js" }, devServer: { contentBase: filepath.outputPath, // writeToDisk: true, port: 3000, overlay: { warnings: false, errors: true } }, optimization: { splitChunks: { cacheGroups: { styles: { name: 'app', test: /.css$/, chunks: 'async', // priority: 30, enforce: true }, vendor: { name: 'vendors', test: /[\/]node_modules[\/]/, filename: "[name].min.js", chunks: 'initial', // priority: 30, enforce: true } } }, minimizer: [new TerserPlugin({ cache: true, parallel: true, extractComments: true, terserOptions: { mangle: true, // Note mangle.properties is false by default. output: { comments: false, } }, })],

},
module: {
    rules: [{
            test: /\.(sass|scss|css)$/,
            exclude: /node_modules/,
            use: [
                isProduction ? MiniCssExtractPlugin.loader : "style-loader",
                // "style-loader",

                {
                    loader: "css-loader",
                    options: {
                        // minimize: true,
                        modules: false,
                        importLoaders: 1,
                        sourceMap: isProduction ? false : true
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: isProduction ? false : true,
                        ident: 'postcss'
                    }
                },

                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: isProduction ? false : true,
                        includePaths: [path.resolve(__dirname, 'node_modules/compass-mixins/lib')]
                    }
                }
            ]
        },
        {
            test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.jpg$|\.jpeg$|\.png$|\.gif$/,
            use: [{
                loader: 'file-loader',
            }, ],
        }
    ]
},

plugins: [

    new HtmlWebpackPlugin({
        filename: isProduction ? '../index.html' : 'index.html'
    }),
    new HtmlWebpackPlugin({
        filename: isProduction ? '../about.html' : 'about.html',
        template: './src/template/about.html'
    }),
    new HtmlWebpackPlugin({
        filename: isProduction ? '../contact.html' : 'contact.html',
        template: './src/template/contact.html'
    }),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        // filename: 'app.[hash].css',
        // chunkFilename: '[id].[hash].css',
        filename: '[name].[contenthash].css',
        chunkFilename: '[id].[contenthash].css',
    }),
    new MediaQuerySplittingPlugin({
        // This is default config (optional)
        media: {
            mobileEnd: 568,
            tabletPortraitEnd: 768,
            tabletLandscapeEnd: 1024,
        },
        splitTablet: true,
    }),
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorPluginOptions: {
            preset: ['advanced', {
                comments: {
                    removeAll: true
                }
            }],
        }
    }),

]

}`