webpack将静态资源压缩语法转义后拷贝至目标文件夹

我叫陈小皮。

已于 2022-10-12 14:58:32 修改

阅读量648

点赞数 1

分类专栏：解决方案文章标签： webpack 前端静态资源压缩 ES6转ES5 webpack静态资源拷贝

于 2022-10-12 14:57:48 首次发布

本文链接：https://blog.csdn.net/m0_37805167/article/details/127282686

版权

解决方案专栏收录该内容

35 篇文章 0 订阅

订阅专栏

需求分析

静态文件要拷贝到目标文件 – copy-webpack-plugin
将文件压缩 – uglify-es
将文件语法从ES6/7转义至ES5，使得低版本浏览器可运行

由于 1.2 使用webpack插件即可实现，但是 3 需要进行对应的babel转换，由于要结合copy-webpack-plugin使用，所以要弄明白babel具体转换的原理

Babel转换原理

实现步骤

解析（parse）：将代码字符串解析成抽象语法树，即所谓的 AST
1. @babel/parser 的 parse 方法
2. babylon 的 parse 方法（由于本项目babel-loader等版本较低，所以使用这个方法）
转换（transform）：对 AST 进行处理，在这个阶段可以对 ES6 代码进行相应转换，即转成 ES5 代码
1. @babel/core 的 transformFromAstSync
2. babel-code 的 transformFromAst（由于本项目babel-loader等版本较低，所以使用这个方法）
生成（generate）：根据处理后的 AST 再生成代码字符串
1. @babel/generator 的 generate
2. babel-generator 的 generate

注意

babel使用要匹配版本，都则会报错 ERROR in Plugin/Preset files are not allowed to export objects, only functions

// 这段是官方文档中的，应该是对版本之间的一些要求
webpack 4.x | babel-loader 8.x | babel 7.x
	如果配置里的babel-loader 8.x版本的话对应的babel 就为 7.x
	运行这句：npm install babel-loader @babel/core @babel/preset-env webpack
webpack 4.x | babel-loader 7.x | babel 6.x
	如果配置里的babel-loader 7.x版本的话对应的babel 就为 6.x
	运行这句：npm install babel-loader@7 babel-core babel-preset-env webpack

具体实现

下载相关插件

// 拷贝文件
npm install copy-webpack-plugin --save-dev
// 压缩文件
npm install uglify-es --save-dev
// 语法转移时使用
npm install babylon --save-dev

拷贝并压缩

const CopyWebpackPlugin = require('copy-webpack-plugin')
const UglifyJS = require('uglify-es')

new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../src/static/test/'),
      to: path.resolve(__dirname, '../dist/static/test/'),
      transform: function (content) {
        const sourceCode = content.toString()
        return UglifyJS.minify(sourceCode).code
      }
    }
])

babel转换

const { parse } = require('babylon')
const { transformFromAst } = require('babel-core')

// babel语法转换
function babelTransformCode (sourceCode) {
    const ast = parse(sourceCode)
    const { code } = transformFromAst(ast, sourceCode, {
        babelrc: false,
        presets: [
            ["env", {
                "modules": false,
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
                }
            }],
            "stage-2"
        ]
    })
    return code
}

使用

new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../src/static/test/'),
      to: path.resolve(__dirname, '../dist/static/test/'),
      transform: function (content) {
        const sourceCode = content.toString()
        const code = babelTransformCode(sourceCode)
        const miniCode = UglifyJS.minify(code).code
        // return code // 转义后代码
        return miniCode // 压缩代码
      }
    }
])

本文参考文章

https://www.babeljs.cn/docs/babel-parser
https://babel.docschina.org/docs/en/6.26.3/babel-generator
https://www.jianshu.com/p/8289a0d30241
https://blog.csdn.net/weixin_39475476/article/details/88044803