Как правильно запустить самозагрузку с помощью веб-пакета - PullRequest
Новая
       5

Как правильно запустить самозагрузку с помощью веб-пакета

0 голосов
/ 29 октября 2019

Я использую bootstrap на своем веб-сайте, но когда я импортирую модуль начальной загрузки в мой index.js с 

import 'bootstrap/js/dist/dropdown'

, я добавляю около 150 КБ к своему размеру пакета, который в основном составляет весь пакет bootsrap js.

Мой webpack.config.js выглядит следующим образом: 

const CompressionPlugin = require('compression-webpack-plugin')
var HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob')
const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = { 
  //target: 'node', // in order to ignore built-in modules like path, fs, etc. 
  //externals: [nodeExternals()], // in order to ignore all modules in node_modules folder 
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: __dirname + "/dist"
  },
  module: {
    rules: [
      //load svg resource files
      {
        test: /\.svg$/,
        loader: 'file-loader'
      },
      // javascript = babel + uglify
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, ///(node_modules|bower_components)/, //'/node_modules/core-js/',
        use: [{ loader: "babel-loader" }]
      },

      // css file: extract to css file with mini extract plugin
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
}, 


  // plugin
  plugins: [
    new CompressionPlugin(),
    //new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'index.html',
      template: './src/index.html'
    }),
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'calendar.html',
      template: './src/calendar.html'
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`,  { nodir: true }),
    }),

    new UglifyJsPlugin({
        test: /\.js$/,
        sourceMap: true,
        uglifyOptions: {
            dead_code: true,
            compress: {},
            mangle: true,
        }
    }),

    //new BundleAnalyzerPlugin(),
  ]
};

Я пытаюсь создать простой статический веб-сайт с календарем и попробовал несколько других подходов к импорту начальной загрузки с веб-пакетом. но получил похожие размеры пачки.

Как мне уменьшить размер пакета?

Спасибо,

ransudz

...