webpack踩坑

问题一

动态导入import() 在 eslint-loader 的相关报错，error Parsing error: Unexpected token import

场景还原

webpack打包项目，项目中使用eslint进行语法检查，使用babel进行语法转化

项目需要用到路由懒加载，使用动态导入 import() 语法来实现

// ...
routes.push({
    path: '/',
    name: 'demo',
    component: () => import('../pages/xdemo.vue') // (*)
})
// ...

然后为了支持动态导入 import() 需要安装babel插件，Babel@6需要使用babel-plugin-syntax-dynamic-import，Babel@7使用@babel/plugin-syntax-dynamic-import

安装完插件，并进行相关配置

配置方式一：直接在webpack.conf.js里配置

{
   test: /.js$/,
   loader: 'babel-loader',
   exclude: /node_modules/,
   options: { // 如果有这个设置则不用再添加.babelrc文件进行配置
        "babelrc": false, // 不采用.babelrc的配置
        "plugins": ["syntac-dynamic-import"]
   }
}

配置方式二：在.babelrc文件里另行单独配置

{
  "plugins": [
      "syntax-dynamic-import"
   ]
}

配置完毕之后，运行 npm run dev，项目能起来，但是却报错了

img

看了之后发现是eslint语法检查过程，报的错

第一个想到的解决方法，是直接将报错的js文件略过eslint的语法检查，也就是在项目的.eslintignore里将报错文件所在的文件夹进行忽略，这种方法是可行的，忽略之后成功 Compiled successfully

第二个想到的解决办法，是对eslint检测规则进行配置，让其支持动态导入 import()，然后网上搜了半天，答案是需要在.eslintrc.js中的 parserOptions 里加一项配置，"parser": "babel-eslint"

img

这个issue的地址是：issue地址

加了之后，好像还是报错，后面想了一下，应该是需要下载一下这个babel-eslint的插件，然后直接用 cnpm view babel-eslint versions 命令查了一下，果然有这个插件，然后就是 cnpm i babel-esling -D 下载该插件

插件下载完毕之后，npm run dev，成功 Compiled successfully。这样就实现了动态导入 import() 既能过eslint的语法检查，然后也能被babel成功编译

以上就是webpack打包项目中使用动态导入import() ，遇到的报错，记录一下，希望遇到类似问题的小伙伴可以作为参考