webpack采坑实践

这两天测试给我提了一些奇奇怪怪的bug，排查一看，原来是老项目上的webpack上没有配置ES6转ES5的，这能忍？遂搞起。

{
    test: /\.js$/, //处理以.js结尾的文件
    loader: 'babel-loader' //用babel-loader处理
}

原以为，插件下一下，rules里多加一条就搞定收工了的事，结果发现页面报错了...

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

google告诉我：
You can mix require and export. You can‘t mix import and module.exports.

原来是import和module.exports一起混合使用冲突了，可是这老代码印象中没有使用import的啊！盲猜是因为引入的第三方库里可能有某些混蛋干了这些事，所以把module文件排除在外

{
    test: /\.js$/, //处理以.js结尾的文件
    include: [ // 和test一样，必须匹配选项
        path.resolve(__dirname, "h5/js")
    ],
    exclude: [ // 必不匹配选项（优先级高于test和include）
        path.resolve(__dirname, "h5/js/module")
    ],
    loader: 'babel-loader' //用babel-loader处理
}

OK，搞定，测试编译后的代码有转换且不报错，深藏功与名。

『前端开发』- webpack采坑实践

webpack采坑实践