Webpack初學(xué)遇到的問題

taoszu 發(fā)布于2019-08-22 18:49 / 1408人閱讀

摘要：的功能包轉(zhuǎn)譯過程中使用到的插件，其中是步驟使用的。階段使用到的一系列標(biāo)準(zhǔn)新增的原生對(duì)象和的，實(shí)現(xiàn)上僅僅是和兩個(gè)包的封裝。功能類似一般用于或者中，因?yàn)樗粫?huì)污染全局變量

引入圖片資源時(shí)遇到的問題

Module parse failed: Unexpected character "?" (1:0)
You may need an appropriate loader to handle this file type.

可能原因：

未安裝處理圖片的loader 解決方法：首先安裝loader：npm install file-loader url-loader --save-dev，然后在 webpack.config.js 文件中的 module 添加 rules 配置

正則表達(dá)式錯(cuò)誤，無法匹配到正確的rules，正確的正則表達(dá)式 /.(jpg|png|svg)??.*$/

引入vue-loader遇到的問題

rules: {
  test: /.vue$/,
  use: [{
    loader: "vue-loader", //將vue格式編寫的組件轉(zhuǎn)換為JavaScript模塊
  }],
  exclude: /node_module/
}

這樣會(huì)報(bào)錯(cuò)：

ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin.Make sure to include VueLoaderPlugin in your webpack config.

原因：
Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

安裝babel-loader的時(shí)候，如果babel-loader@8需要安裝babel-core@7.x，如果你想要使用Babel6.x的話，需要babel-loader@7
在webpack.config.js中只需要配置babel-loader即可，不需要babel-core，但是需要安裝babel-core
babel-core是babel轉(zhuǎn)譯器的核心，提供了babel轉(zhuǎn)譯的API，webpack中的bable-loader就是調(diào)用這些API來完成轉(zhuǎn)譯過程的。

Babel的功能包

babel-plugin-xxx: babel轉(zhuǎn)譯過程中使用到的插件，其中babel-plugin-transform-xxx是transform步驟使用的。
babel-preset-xxx: transform階段使用到的一系列plugin
babel-polyfill: JS標(biāo)準(zhǔn)新增的原生對(duì)象和API的shim，實(shí)現(xiàn)上僅僅是core-js和regenerator-runtime兩個(gè)包的封裝。
babel-runtime: 功能類似babel-polyfill,一般用于library或者plugin中，因?yàn)樗粫?huì)污染全局變量

GPU云服務(wù)器云服務(wù)器布局遇到的問題學(xué)習(xí)遺傳算法遇到的問題看apue遇到的有關(guān)問題 js請(qǐng)求數(shù)據(jù)遇到的問題嗎

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96251.html

相關(guān)文章

react+webpack+跨域代理+多頁(yè)面 初學(xué)心得分享

摘要：初學(xué)，利用進(jìn)行工程化開發(fā)管理，遇到一些問題，如多頁(yè)面處理，跨域代理的設(shè)置，如何同時(shí)引入使用。這個(gè)命令生成的文件可以放到后端服務(wù)器指定的靜態(tài)文件目錄下，這些就是用來上線的文件。這兩個(gè)文件夾下的代碼文件就是為兩個(gè)獨(dú)立的頁(yè)面準(zhǔn)備的。初學(xué)react，利用webpack進(jìn)行工程化開發(fā)管理，遇到一些問題，如多頁(yè)面處理，跨域代理的設(shè)置，如何同時(shí)引入使用jQuery。第一次試水，簡(jiǎn)單寫了一個(gè)表格組件...

Chao 2019-08-26 17:15 評(píng)論0 收藏0
從零開始編寫React-Express單頁(yè)博客應(yīng)用(學(xué)習(xí)總結(jié))

摘要：?jiǎn)雾?yè)博客應(yīng)用編寫總結(jié)很久之前就想寫一個(gè)博客應(yīng)用在一開始想要直接用和模板直接寫但是暑假一開始的時(shí)候不小心入了的坑所以就一不做二不休直接用寫那既然用了不寫個(gè)單頁(yè)應(yīng)用也過意不去了不前前后后寫了將近兩個(gè)星期現(xiàn)在看來這其實(shí)是一個(gè)很容易的應(yīng)用但是鑒于 React-Express單頁(yè)博客應(yīng)用編寫總結(jié) 很久之前就想寫一個(gè)博客應(yīng)用.在一開始想要直接用express和ejs模板直接寫, 但是暑假一開始的時(shí)...

Jioby 2019-08-21 10:56 評(píng)論0 收藏0
關(guān)于vue開發(fā)的常見問題

摘要：看看這里說的順便你可以加深對(duì)和的理解計(jì)算屬性默認(rèn)只有，不過在需要時(shí)你也可以提供一個(gè)然后，解決完畢嘻嘻嘻二打包工程上線后，你發(fā)現(xiàn)開發(fā)者工具的看到了源碼對(duì)，上線配置錯(cuò)了。一、vue單頁(yè)面回退丟失參數(shù)的問題可能有些跟我一樣的新手同學(xué)會(huì)遇到一個(gè)問題，就是比如我從商品詳情跳轉(zhuǎn)到購(gòu)物車，沒問題，但是，購(gòu)物車頁(yè)面中點(diǎn)擊瀏覽器的回退按鈕，返回到detail頁(yè)面時(shí)，你的動(dòng)態(tài)數(shù)據(jù)（圖片啊，名稱啊，價(jià)...

陸斌 2019-08-22 18:18 評(píng)論0 收藏0
關(guān)于vue開發(fā)的常見問題

摘要：看看這里說的順便你可以加深對(duì)和的理解計(jì)算屬性默認(rèn)只有，不過在需要時(shí)你也可以提供一個(gè)然后，解決完畢嘻嘻嘻二打包工程上線后，你發(fā)現(xiàn)開發(fā)者工具的看到了源碼對(duì)，上線配置錯(cuò)了。一、vue單頁(yè)面回退丟失參數(shù)的問題可能有些跟我一樣的新手同學(xué)會(huì)遇到一個(gè)問題，就是比如我從商品詳情跳轉(zhuǎn)到購(gòu)物車，沒問題，但是，購(gòu)物車頁(yè)面中點(diǎn)擊瀏覽器的回退按鈕，返回到detail頁(yè)面時(shí)，你的動(dòng)態(tài)數(shù)據(jù)（圖片啊，名稱啊，價(jià)...

lushan 2019-08-02 10:47 評(píng)論0 收藏0
webpack入門學(xué)習(xí)手記（二）

摘要：例如現(xiàn)在的入門學(xué)習(xí)手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學(xué)習(xí)手記一，主要是介紹了的核心概念，是整個(gè)學(xué)習(xí)過程的基礎(chǔ)知識(shí)。新生成的類似如下入門學(xué)習(xí)手記因?yàn)樯傻膬?nèi)容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。最近開始想要維護(hù)一個(gè)個(gè)人的公眾...

Joyven 2019-08-23 14:05 評(píng)論0 收藏0