一款用于包装 Entry 配置的 Webpack 插件

简介: Entrypoint wrapper webpack plugin是一款用于包装 Entry 配置的 Webpack 插件。

Entrypoint wrapper webpack plugin

Description

一款用于包装 Entry 配置的 Webpack 插件。

安装

npm i -D entrypoint-wrapper-webpack-plugin

用法

const EntryPoint = require('entrypoint-wrapper-webpack-plugin');
module.exports = {
  entry: {
    'common': ['vue', 'vuex'],
    'my/index': 'src/views/my/index.vue'
  },
  plugins: [
  new EntryPoint({
    include: /.*\.vue$/,
    file: './default_index.js' // wrapper file
  })
  ]
}
const EntryPoint = require('entrypoint-wrapper-webpack-plugin');
module.exports = {
  entry: {
    'common': ['vue', 'vuex'],
    'my/index': 'src/views/my/index.vue'
  },
  plugins: [
  new EntryPoint({
    include: /.*\.vue$/,
    // template string
    template: 'import Main from '<%= origin %>';Main.el = '#root';new Vue(Main)'
  })
  ]
}
const EntryPoint = require('entrypoint-wrapper-webpack-plugin');
module.exports = {
  entry: {
    'common': ['vue', 'vuex'],
    'my/index': 'src/views/my/index.vue'
  },
  plugins: [
  new EntryPoint({
    include: /.*\.vue$/,
    // template function
    template: function(params){
      return `import Main from '${params.origin}';Main.el = '#root';new Vue(Main)`
    }
  })
  ]
}

选项

姓名 类型 默认 描述
skipExistFiles {Boolean} false 跳过现有文件
include {RegExp} /.*/ 包含的文件
file {String} '' 包装路径
template {Function,String} '' 包装模板
相关文章
|
19天前
|
缓存 JavaScript
webpack配置中的3种hash值
webpack配置中的3种hash值
|
25天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
36 3
|
6天前
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
12 0
|
2月前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
|
2月前
|
缓存 JavaScript 前端开发
webpack学习笔记--基本配置
webpack学习笔记--基本配置
|
2月前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
2月前
|
存储 前端开发 文件存储
webpack成长指北第5章---webpack的基础配置
webpack成长指北第5章---webpack的基础配置
32 0
|
JavaScript 前端开发
史上最走心webpack4.0中级教程——配置之外你应该知道的事
《webpack4.0各个击破系列》适合不满足于只会配置webpack但一时间又看不懂源码的中级读者。我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的博文有本质的区别,不信你读读看。
1746 0
|
2月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
59 1
|
2月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
57 0