webpack從入門到精通----（五）es6\es7語法的轉化及語法校驗器

轉化 es6 語法(babel)

1. 安裝
   yarn add babel-loader @babel/core @babel/preset-env -D
2. 在 webpack.config.js 中 使用

module: { // 模塊
    rules: [
        {
            test: /\.js$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: { // 用 babel-loader 需要把 es6 -> es5
                        presets: [
                            '@babel/preset-env' // 這裏面就是把es6 -> es5的模塊
                        ]
                    }
                },
            ]
        }
    ]
}

可以與 uglifyjs 一起用了

支持 class 語法

1. 安裝插件
   yarn add @babel/plugin-proposal-class-properties -D

2. 配置插件

module: { // 模塊
    rules: [
        {
            test: /\.js$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: { // 用 babel-loader 需要把 es6 -> es5
                        presets: [
                            '@babel/preset-env' // 這裏面就是把es6 -> es5的模塊
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties' // 支持類(class)的寫法
                        ]
                    }
                },
            ]
        }
    ]
}

支持 裝飾器寫法 @ …

1. 安裝
   yarn add @babel/plugin-proposal-decorators -D
2. 使用

// module.rules[0]
{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: { // 用 babel-loader 需要把 es6 -> es5
            presets: [
                '@babel/preset-env' // 這裏面就是把es6 -> es5的模塊
            ],
            plugins: [
                [
                    '@babel/plugin-proposal-decorators',
                    { 'legacy': true }
                ],
                [   // 支持類(class)的寫法
                    '@babel/plugin-proposal-class-properties',
                    { 'loose': true } // 寬鬆模式
                ]
            ]
        }
    },
}

@babel/plugin-transform-runtime

1. 安裝
   yarn add @babel/plugin-transform-runtime -D // 運行時開發依賴
   yarn add @babel/runtime // 生產環境依賴

2. 使用

// module.rules[0]
{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: { // 用 babel-loader 需要把 es6 -> es5
            presets: [
                '@babel/preset-env' // 這裏面就是把es6 -> es5的模塊
            ],
            plugins: [
                ['@babel/plugin-proposal-decorators',{ 'legacy': true }],
                ['@babel/plugin-proposal-class-properties',{'loose': true } ],
                '@babel/plugin-transform-runtime'
            ]
        }
    },
    include: path.resolve(__dirname, 'src'), // 只作用於src下的文件
    exclude: /node_modules/, // 不作用的文件夾
},

es7 語法

1. 安裝
   yarn add @babel/polyfill
2. 在入口js文件中index.js使用

require('@babel/polyfill');
'aaa'.includes('a'); // ok 
// 其實底層是直接重新實現了includes方法

校驗器 eslint

1. 安裝
   yarn add eslint eslint-loader -D
2. 生成 校驗器文件

• 1. 打開https://eslint.org/demo/
• 2. 選擇使用環境、語法、ECMA版本、模塊…
• 3. 下載 .eslintrc.json 文件
• 4. 拖到webpack.config.js同級目錄下

注意，文件名須爲.eslintrc.json，需要加上一個.

3. 配置 webpack.config.js文件

// module.rules[0]
{
    test: /\.js$/,
    use: {
        loader: 'eslint-loader',
        options: {
            enforce: 'pre', // 強制這個loader最先執行
        }
    }
},

1. loader的類型

• pre 前面執行的loader
• normal 普通的loader
• 內聯loader
• post 後面執行的loader

最終代碼

// webpack 是node 寫出來的 node的寫法來運行

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
let UglifyjsWbpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    optimization: { // 優化項
        minimizer: [
            new UglifyjsWbpackPlugin({
                cache: true, // 是否用緩存
                parallel: true, // 是否併發打包
                sourceMap: true // es6 -> es5 源碼映射 方便調試
            }),
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    mode: 'development', // 模式 默認兩種 production(會壓縮js文件) development
    entry: './src/index.js', //入口
    output: { // 出口
        filename: 'bundle.js', // 打包後的文件名 [hash:8] 只顯示8位的hash文件
        path: path.resolve(__dirname, 'build') // 路徑必須是一個絕對路徑
    },
    plugins: [ // 數組 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 打包的模板路徑
            filename: 'index.html', // 打包之後的文件名
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css', // 抽離的文件名
        })
    ],
    module: { // 模塊
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        enforce: 'pre', // 強制這個loader最先執行
                    }
                }
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: { // 用 babel-loader 需要把 es6 -> es5
                        presets: [
                            '@babel/preset-env' // 這裏面就是把es6 -> es5的模塊
                        ],
                        plugins: [
                            [
                                '@babel/plugin-proposal-decorators',
                                { 'legacy': true }
                            ],
                            [   // 支持類(class)的寫法
                                '@babel/plugin-proposal-class-properties',
                                { 'loose': true } // 寬鬆模式
                            ],
                            '@babel/plugin-transform-runtime'
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, // 將解析完的css代碼生成文件，然後以link標籤的方式插入到html文檔中
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require("autoprefixer") /*在這裏添加*/
                            ]
                        }
                    }

                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader, // 將解析完的css代碼生成文件，然後以link標籤的方式插入到html文檔中
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require("autoprefixer") /*在這裏添加*/
                            ]
                        }
                    },
                    'less-loader'
                ]
            }
        ]
    }
}