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