webpack2 升级 webpak4 两点小问题。

1.Cannot find module '@babel/plugin-proposal-class-properties'

webpack4 的配置如下

    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader',
            options:{
                presets: ['@babel/preset-env'],
                plugins: ['@babel/plugin-proposal-class-properties']
           }
        }
    ],

网上找了一大堆的原因都是说需要安装@babel/plugin-proposal-class-properties，但是我查来查去我都是安装了，后来才发现，我用的是自己cli,不在主文件目录编译，所以需要resolve包裹起来。 如下:

test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
    {
        loader: 'babel-loader',
        options:{
            presets: [[require.resolve('@babel/preset-env')]],
            plugins: [require.resolve('@babel/plugin-proposal-class-properties')]
       }
    }
],

2.编译后发现有些语法没有编译正确。比如编译如下文件，发现有些没有被编译.

import {
    data,
} from './app'
let app = 'app'
console.log(`${data.index}`)
console.log(require(`./${data.index}`))
console.log(require('./'+data.index+''))
console.log(require('./'+`${data.index}`+''))

编译后如下

发现data没有编译成_app__WEBPACK_IMPORTED_MODULE_1__["data"] 导致页面报错。查了API 才发现需要在preset-env 上加 loose:true

loose 这个选项设置为true时，它会尽可能的将ES6+代码转化为ES5标准代码，而非用ES5去实现的ES6+代码，最核心的体现就是class语法的实现。在ES5中，我们通过SomeFunction.prototype.someMethod来创建原型链方法，而在ES6中它的实现完全不同。当loose为true时，preset-env将class语法转化为原型链的实现方式。