rollup打包项目:rollup.config.js

rollup打包带vue文件的项目

import nodeResolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs';
import vuePlugin from 'rollup-plugin-vue';
import typescript from 'rollup-plugin-typescript2';
import scss from 'rollup-plugin-scss'
import postcss from 'rollup-plugin-postcss';  
import postScss from 'postcss-scss';
import autoprefixer from 'autoprefixer';  
import cssnano from 'cssnano';  
import replace from '@rollup/plugin-replace';
let defaults = { compilerOptions: { declaration: true } };
let override = { compilerOptions: { declaration: false } };

export default {
  input: { // 这种写法也可以进行多入口打包
    login: 'main.js',
  },
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
    nodeResolve(), // 解析 node_modules 中的模块  
    commonjs(), // 将 CommonJS 模块转换为 ES6 模块 

    vuePlugin({
      compileTemplate: true,
      css: true,
    }),
    typescript({
      tsconfigDefaults: defaults,
      tsconfig: "tsconfig.json",
      tsconfigOverride: override
    }),
    replace({
      values: {
        'process.env.NODE_ENV': '"production"'
      }
    }),
    scss(),
    postcss({  
      plugins: [  
        autoprefixer(),  
        cssnano(), // 用于压缩 CSS  
      ], 
      parser: postScss, // 使用 postcss-scss 解析 SCSS 文件   
      extract: 'assets/index.css', // 指定输出的 CSS 文件名,包括路径  
      outputStyle: 'compressed' // 压缩 CSS,使其最小化  
    }), 


  ]
};

rollup打包原生html,js,css项目

import nodeResolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import terser from "@rollup/plugin-terser";
import copy from "rollup-plugin-copy";
import postcss from "rollup-plugin-postcss";
import scss from "postcss-scss";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";

export default {
  // input: 'static/source/js/mainHome.js', // 输入文件的路径
  input: {
    // 这种写法也可以进行多入口打包
    login: "src/js/mainLogin.js",
    home: "src/js/mainHome.js"
  },
  output: {
    dir: "dist",
    format: "es",
  },
  plugins: [
    babel({
      exclude: "node_modules/**",
    }),
    nodeResolve(), // 解析 node_modules 中的模块
    commonjs(), // 将 CommonJS 模块转换为 ES6 模块
    copy({
      targets: [
        { src: "src/views", dest: "dist/views" },
        { src: "static/source/img/**/*", dest: "dist/img" },
      ],
    }),
    postcss({
      plugins: [autoprefixer(), cssnano()], // 在这里添加你需要的PostCSS插件,例如autoprefixer等
      parser: scss, // 使用 postcss-scss 解析 SCSS 文件
      // extract: true, // 将 CSS 提取到单独的文件中
      extract: "css/index.css",
      outputStyle: "compressed", // 压缩 CSS,使其最小化
    }),
    terser(), // 使用 Terser 进行代码压缩
  ],
};

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值