Script-webpack-plugin NPM

script-webpack-plugin

:kissing_heart:一个处理脚本文件的webpack插件。

特性：运行环境按需补丁、自动分包、代码压缩、多线程打包、生成gizp、支持ESNext、typescript语法、开发环境缓存构建。

:point_right:

安装获取

yarn add script-webpack-plugin -D

npm install script-webpack-plugin -D

pnpm install script-webpack-plugin -D

使用方式

const ScriptWebpackPlugin = require('script-webpack-plugin')

module.exports = {
  plugins: [new ScriptWebpackPlugin()]
}

const ScriptWebpackPlugin = require('script-webpack-plugin')

module.exports = {
  plugins: [
    new ScriptWebpackPlugin({
      dropConsole: false
    })
  ]
}

注意

项目默认使用babel7进行脚本转码，见源码

默认使用的转换器：

@babel/preset-env 转换需要的浏览器环境代码
@babel/preset-typescript 根据是否存在tsconfig.json文件判断，是否装置该插件

默认使用的插件：

@babel/plugin-proposal-nullish-coalescing-operator typescript的可选链(var.prd ?? 'test')
@babel/plugin-proposal-decorators 装饰器(@connet())
@babel/plugin-proposal-class-properties class 类
@babel/plugin-proposal-export-default-from 默认导出(export v from 'mod')
@babel/plugin-proposal-export-namespace-from 模糊导出(export * as ns from 'mod')
@babel/plugin-transform-runtime 去除重复的 polyfill 导入

配置项

具体配置项的数据类型见types.ts

cacheDirectory 生成缓存目录。生成环境默认不开启，开发环境默认: './node_modules/.cache/script'
dropConsole 是否在生产环境删除console。默认: true
gzip 脚本文件的gizp压缩。默认开启，详见：https://github.com/webpack-contrib/compression-webpack-plugin

按照babelConfig配置要求，例如创建babel.config.js文件，最终会和默认配置合并。

按照browserslist配置要求，例如创建.browserslistrc，最终采用browserslist的配置要求生成代码。

script-webpack-plugin script-webpack