webpack处理js语法及校验

最新推荐文章于 2024-05-21 09:44:48 发布

rookieLink

最新推荐文章于 2024-05-21 09:44:48 发布

阅读量414

点赞数

分类专栏： webpack系列文章标签： eslint 语法校验

本文链接：https://blog.youkuaiyun.com/zf2014122891/article/details/104553467

版权

webpack系列专栏收录该内容

37 篇文章

订阅专栏

该博客介绍了如何使用Webpack处理和优化JavaScript的高级语法，包括添加@babel/plugin-transform-runtime、@babel/runtime和@babel/polyfill来实现兼容。同时，通过引入eslint-loader进行语法校验，确保代码质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

处理js语法及校验：

如何去优化和兼容一些高级语法

yarn add @babel/plugin-transform-runtime
yarn add @babel/runtime
yarn add @babel/polyfill
yarn add eslint-loader

index.js

require('@babel/polyfill');

webpack.config.js

let path = require('path');
let HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,
        contentBase: './build',
        compress: true,
    },
    mode: 'development',  // 模式 模式有两种  production development
    entry: './src/index.js', // 入口
    output: {
        filename: "bundle.[hash:8].js", // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 路径必须是绝对路径
    },
    plugins: [  // 放着所有的webpack插件
        new HTMLWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            hash: true
        }),
    ],
    module: {   // 模块
        // loader
        rules: [ 
            {
                test: /\.js$/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        enforce: 'pre'  // previous   post
                    },
                },
                exclude: /node_module/
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', {legacy: true}],
                            ['@babel/plugin-proposal-class-properties', {loose: true}],
                            '@babel/plugin-transform-runtime'
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    }
};