webpack 錯誤資訊彙總
阿新 • • 發佈：2019-02-06
最近在學習webpack，學習成長之路總是坎坎坷坷。總結一下學習中遇到的一些錯誤，主要是錯誤資訊和解決方法。
錯誤一：vue.js:515 [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)
name 在data那裡沒有定義。
要這樣定義：
export default {
name 錯誤2：Do not mount Vue to or <body> - mount tonormal elements instead.
vue1.x 允許開發者以 <body> 或 <html> 作為根實體的掛載點，
但到了VueJS2.0 後，只能通過 獨立的節點掛載 ，如:div 等。
否則會產生錯誤，警告訊息如下：
"Do not mount Vue to <html> or <body 錯誤3： [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in )
上述報錯是發生在使用vue框架時,單純的向Vue中繫結一個template,如下：
new Vue({
el: '#app',
template:"<div>wret</div>"
// router,
// render: h => h(App)
})
這是什麼意思呢?
執行時構建不包含模板編譯器，因此不支援 template 選項，只能用 render 選項，
但即使使用執行時構建，在單檔案元件中也依然可以寫模板，
因為單檔案元件的模板會在構建時預編譯為 render 函式。
上面一段是官方api中的解釋。就是說，如果我們想使用template，
我們不能直接在客戶端使用npm install之後的vue。此時，再去看查vue模組，新增幾行
webpack.config.js中新增:
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
再執行，沒錯ok了。
錯誤4：webpack提示 [HMR] Hot Module Replacement is disabled
重新整理頁面提示：Uncaught Error: [HMR] Hot Module Replacement is disabled，頁面中的內容沒有渲染出來
webpack的配置（webpack.config.js）裡面加這個：
plugins: [
new webpack.HotModuleReplacementPlugin()
]
錯誤5：unknown property 'loaders'....
webpack v2 之後都用rules 了
loaders改為rules
錯誤5：Module build failed: TypeError: this._init is not a function
在一些Webpack的版本中，loader不能用簡寫省去 -loader 的形式。因此vue-loader應該使用全拼
的形式。
webpack.config.js 檔案應該改成這樣：
{
test: /\.vue$/,
loader: 'vue-loader', /* 原來的'vue'改成'vue-loader' */
options: {
// vue-loader options go here
}
},
錯誤6：WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
webpack.config.js 檔案新增：
performance: {
hints: false
}
錯誤7：The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
在Webpack中，提供了mode變數，用於配置執行環境，mode的值可以為
development，表示的是開發模式，或者是production，表示的是生產模式。
package.json檔案修改配置項為：
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
npm run dev 這個時候dist裡面的檔案的不是壓縮過的
是npm run build 這個時候dist的main.js就是壓縮了的。
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded')
錯誤8：webpack 編譯成功了 但是沒有生成的檔案？？
webpack-dev-server只是個本地的檔案伺服器 它只是做檔案服務 不做打包服務
webpack-dev-server不會生成檔案的，只會在記憶體裡，用webpack試試吧