Webpack初學遇到的問題

引入圖片資源時遇到的問題

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

可能緣由：

1. 未安裝處理圖片的loader 解決方法：首先安裝loader：npm install file-loader url-loader --save-dev，而後在 webpack.config.js 文件中的 module 添加 rules 配置
2. 正則表達式錯誤，沒法匹配到正確的rules，正確的正則表達式 /\.(jpg|png|svg)\??.*$/

引入vue-loader遇到的問題

rules: {
  test: /\.vue$/,
  use: [{
    loader: 'vue-loader', //將vue格式編寫的組件轉換爲JavaScript模塊
  }],
  exclude: /node_module/
}

這樣會報錯：

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的時候，若是babel-loader@8須要安裝babel-core@7.x，若是你想要使用Babel6.x的話，須要babel-loader@7
在webpack.config.js中只須要配置babel-loader便可，不須要babel-core，可是須要安裝babel-core
babel-core是babel轉譯器的核心，提供了babel轉譯的API，webpack中的bable-loader就是調用這些API來完成轉譯過程的。

Babel的功能包

babel-plugin-xxx: babel轉譯過程當中使用到的插件，其中babel-plugin-transform-xxx是transform步驟使用的。
babel-preset-xxx: transform階段使用到的一系列plugin
babel-polyfill: JS標準新增的原生對象和API的shim，實現上僅僅是core-js和regenerator-runtime兩個包的封裝。
babel-runtime: 功能相似babel-polyfill,通常用於library或者plugin中，由於它不會污染全局變量