Hello everybody,

I'm new to Statamic and I'd like to do the following.

Using gulp, I added this to my tasks:

gulp.task('copy:libs', function() {
  return gulp
    .src(npmdist(), { base: paths.base.node.dir })
    .pipe(gulp.dest(paths.dist.libs.dir));
});

This copied my packages from node_modules to my libs directory. Now I'd like to do the same using webpack (Laravel mix):

  • Source: node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css
  • Target: lib/css/fancybox/jquery.fancybox.min.css

and

  • Source: node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.js
  • Target: lib/js/fancybox/jquery.fancybox.min.js

Unfortunately I did not find a possibility to do this using WebpackCopy, yet.

This is my package.json:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules"
  },
  "devDependencies": {
    "@fancyapps/fancybox": "3.5.7",
    "acorn": "^6.1.1",
    "aos": "3.0.0-beta.6",
    "bootstrap": "~4.3.1",
    "countup.js": "1.9.3",
    "cross-env": "~5.2.0",
    "flickity": "2.2.0",
    "flickity-fade": "1.0.0",
    "highlightjs": "9.12.0",
    "jarallax": "1.10.7",
    "jquery": "3.4.1",
    "laravel-mix": "^4.0.16",
    "resolve-url-loader": "2.3.1",
    "sass": "^1.22.1",
    "sass-loader": "7.*",
    "smooth-scroll": "16.0.3",
    "typed.js": "2.0.10",
    "vue-template-compiler": "^2.6.10"
  }
}

This is my webpack.mix.js:

const mix = require('laravel-mix');

mix.webpackConfig({
    module: {
        rules: [{
            test: /node_modules(?:\/|\\).+\.js$/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        alias: {
            '@': path.join(__dirname),
            'node_modules': path.join(__dirname, 'node_modules')
        }
    }
});

mix.sass('sass/theme.scss', 'css')
.options({
    processCssUrls: false,
});

And this is webpack.config.js:

let mix = require('laravel-mix/src/index');

let ComponentFactory = require('laravel-mix/src/components/ComponentFactory');

new ComponentFactory().installAll();

require(Mix.paths.mix());

Mix.dispatch('init', Mix);

let WebpackConfig = require('laravel-mix/src/builder/WebpackConfig');

const config = new WebpackConfig().build();

module.exports = config;