webpack基础（三）js的处理

本系列文章的webpack版本未webpack4

Js的处理

处理Js模块

yarn add babel-loader @babel/core @babel/preset-env -D

loader调用babel/core,babel/core调用转化模块

 {
                    test: /\.js$/,
                    exclude:/node_modules/,
                    use: [
                        {
                            loader: "babel-loader",
                            options: {
                                // 用babel-loader，es6-》5，
                                presets:[
                                    '@babel/preset-env'
                                ],
                                 plugins:[
                                    '@babel/plugin-proposal-class-properties'
                                ]
                            }
                        }
                    ],
                }

另外的高级语法，es7

class A{
    a=1
}

根据报错安装，

yarn add @babel/plugin-proposal-class-properties -D

或者装饰器，去babel官网搜索。

yarn add @babel/plugin-proposal-decorators

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

处理js语法及运行时校验

比如Promise Generator等打包后不能正确工作

yarn add @babel/plugin-transform-runtime -D
yarn add @babel/runtime --save

实例的方法不会被解析 用

yarn add @babel/polyfill --save

会将实现的补丁引入打包后代码

在index.js文件引入 @babel/polyfill

import "@babel/polyfill"

配置eslint

yarn add eslint eslint-loader -D

 {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: "eslint-loader",
                    options: {
                        enforce: 'pre'    //强制更改顺序，pre 前  post 后
                    }
                }],
            },

去官网配置下载 或者自行配置 .eslintrc.js

由于loader的顺序是从右向左，从下到上。

增加.eslintignore文件进行忽略