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不正常的工作.