問題一
動態導入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() ，遇到的報錯，記錄一下，希望遇到類似問題的小伙伴可以作為參考