script-webpack-plugin

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

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

👉

安装获取

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的配置要求生成代码。