webpack學習筆記

webpack中output輸出名的解釋:
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
其實name會輸出entry中的屬性名.

webpack中的loader配置:
webpack的loader不僅僅需要用NPM下載和在配置文件中配置,還需要在入口進行加載.
如:import 'style-loader!css-loader!./style.css';

webpack的NPM:
通過在npm的package.json設置:
"scripts": {
"build": "webpack路徑"
}
即可通過npm run build對webpack進行構建.

關于入口:
webpack入口文件負責安排其他js該如何執行.可查看該鏈接:https://segmentfault.com/q/1010000008007520

關于css中的url文件的讀取問題:
style-loader和css-loader加載器是無法處理css中url的問題的.我們需要使用file-loader加載器,先在入口js文件中加載那些圖片,這樣webpack打包后的頁面就能識別這些圖片了.至于上面說的帶有url的css,這之后就只需要交給style-loader和css-loader進行處理了.

多入口對應的多輸出:

entry: {
        'register/register':'./src/register_entry.js',
        'file_upload/file_upload':'./src/file_upload_entry/file_upload_entry.js'
    }

將屬性名換成路徑字符串,那么通過入口文件打包的文件會生成在

output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    }

output中path所指定的位置.同時file_upload/file_upload中的最后一個地址名,會成為文件名的一部分.
但是這里有個坑,那就是一開始的index.html文件,只能存在于dist目錄下,否則會提示找不到js文件.但其他html文件則不存在這個問題.

import vue的坑:
引入vue的時候一定要這么寫:import Vue from 'vue/dist/vue.js';
而不是這么寫import Vue from 'vue';
后一種寫法會導致vue不正常的工作.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析,然后將這些模塊按照指定的規則生成...
    EarthChen閱讀 412評論 0 1
  • 這是我第二次學習webpack了,初見他時,我是一臉懵逼的,這次再見時,稍微輕松了一點,現在寫下這份學習筆記,用來...
    ruby0922閱讀 318評論 0 0
  • webpack第一次出現在我的視線,是在一次面試中,當時面試官問我是否了解AMD、CMD、Gulp、webpack...
    云飄霧散閱讀 1,788評論 0 1
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看,也希望更多的人看到...
    小小字符閱讀 8,227評論 7 35
  • 謝謝你讓我這么愛你,再也不需要有人代替,謝謝你讓我這么愛你,讓我一次愛的徹底…… 遇見你之前,我從...
    一不小心活成了七月閱讀 259評論 1 1