view release on metacpan or  search on metacpan

lib/Mojo/Alien/webpack.pm  view on Meta::CPAN

      mode  => 'development',                        # or "production"
      mtime => 1616976114,                           # File modification epoch timestamp
      name  => 'relative/output.js',                 # Name of asset, without checksum or mode
      path  => '/path/to/entry-name.development.js', # Absolute path to asset
    },
  }

Note that this method is currently EXPERIMENTAL.

=head2 build

  $webpack->build;

Will build the assets or croaks on errors. Automatically calls L</init>.

=head2 exec

  $webpack->exec;

This method will replace the current process, instead of starting webpack
inside a fork. This method is called by L</watch> inside a fork.

=head2 init

  $webpack = $webpack->init;

Will install "webpack" and "webpack-cli" and create a default L</config>. Does
nothing if this is already done.

This method is automatically called by L</build> and L</watch>.

=head2 pid

  $int = $webpack->pid;

Returns the PID of the webpack process started by L</start>.

=head2 stop

  $webpack->stop;

Will stop the process started by L</watch>. Does nothing if L</watch> has not
been called.

=head2 watch

  $webpack->watch;

Forks a new process that runs "webpack watch". This means that any changes will
generate new assets. This is much more efficient than calling L</build> over
and over again. Automatically calls L</init>.

=head1 SEE ALSO

L<Mojolicious::Plugin::Webpack> and L<Mojo::Alien::rollup>.

=cut

__DATA__
@@ include/css.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('css-minimizer-webpack-plugin');

module.exports = function(config, {isDev}) {
  if (!isDev) config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
  config.plugins.push(new MiniCssExtractPlugin({filename: isDev ? '[name].development.css' : '[name].[contenthash].css'}));
  config.module.rules.push({
    test: /\.css$/,
    use: [MiniCssExtractPlugin.loader, {loader: 'css-loader', options: {sourceMap: true, url: false}}],
  });
};
@@ include/eslint.js
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = function(config) {
  config.plugins.push(new ESLintPlugin({
    exclude: ['node_modules/**', '**/*.css', '**/*.sass'],
    fix: process.env.ESLINT_FIX ? true : false,
  }));
};
@@ include/js.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = function(config, {isDev}) {
  if (!isDev) config.optimization.minimizer.push(new TerserPlugin({parallel: true}));

  config.module.rules.push({
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        plugins: ['@babel/plugin-transform-runtime'],
        presets: ['@babel/preset-env'],
      },
    },
  });
};
@@ include/sass.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('css-minimizer-webpack-plugin');

module.exports = function(config, {isDev}) {
  if (!isDev) config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
  config.plugins.push(new MiniCssExtractPlugin({filename: isDev ? '[name].development.css' : '[name].[contenthash].css'}));
  config.module.rules.push({
    test: /\.s(a|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {loader: 'css-loader', options: {sourceMap: true, url: false}},
      {loader: 'sass-loader', options: {sourceMap: true}},
    ],
  });
};
@@ include/vue.js
const {VueLoaderPlugin} = require('vue-loader');

module.exports = function(config) {
  config.plugins.push(new VueLoaderPlugin());
  config.module.rules.push({test: /\.vue$/, use: 'vue-loader'});
};
@@ webpack.config.js
const fs = require('fs');
const pkg = require('./package.json');
const path = require('path');

const assetsDir = process.env.WEBPACK_ASSETS_DIR || path.resolve(__dirname, 'assets');
const isDev = process.env.NODE_ENV !== 'production';

const config = {
  entry: {},
  mode: isDev ? 'development' : 'production',
  module: {rules: []},
  optimization: {minimizer: []},
  output: {},
  plugins: [],
};

config.output.filename = isDev ? '[name].development.js' : '[name].[chunkhash].js';
config.output.path = process.env.WEBPACK_OUT_DIR || path.resolve(__dirname, 'dist');
config.output.publicPath = '';

const entry = path.resolve(assetsDir, 'index.js');
if (fs.existsSync(entry)) config.entry[pkg.name.replace(/\W+/g, '-')] = entry;

const includeFile = path.resolve(assetsDir, 'webpack.config.d', 'include.js');
if (fs.existsSync(includeFile)) require(includeFile)(config, {isDev});

// Legacy
const custom = path.resolve(assetsDir, 'webpack.custom.js');
if (fs.existsSync(custom)) require(custom)(config);

module.exports = config;