在學習vue的時候,須要進行打包操做,視頻看的是webpack3的踩了好多坑,因此在記錄一下,方便後續複習。有錯誤請指出。css
package.json
文件可以使用webpack -v查看當前版本號。html
接下來進行打包,使用 webpack ./src/main.js -o ./dist/bundle.js --mode development 語句,打包成功。能夠看到多了一個dist文件夾,但打包出來的文件是設置的文件名bundle.jsvue
若是有引入jquery,還須要手動安裝jquery。npm install jquery -D
node
測試:在html文件中引入打包的js文件,在本地運行能夠看到效果。jquery
注意:這裏每修改一次都要從新打包。webpack
新建webpack.config.js文件,進行基本配置。指定完出入口以後,能夠直接使用「webpack」 進行打包,但修改後仍是須要手動更新。web
接下來設置項目熱部署,使用webpack-dev-server實現自動打包編譯功能正則表達式
1. 運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴
2. 安裝完畢後,這個工具的用法和 webpack 命令的用法,徹底同樣
3. 因爲,咱們是在項目中,本地安裝的 webpack-dev-server , 因此,沒法把它看成 腳本命令,在powershell 終端中直接運行;(只有那些 安裝到 全局 -g 的工具,才能在 終端中正常執行)
4. 注意: webpack-dev-server 這個工具,若是想要正常運行,要求,在本地項目中,必須安裝 webpackshell
這裏須要在package.json文件的script項裏定義"dev":"webpack-dev-server" 表明我執行npm run dev時就執行這句話。執行npm run dev,報錯了。。。。npm
本地安裝webpack和webpack-cli。安裝完packed.json文件裏會顯示相關的版本信息。若是本地安裝完以後仍是不行能夠試試全局安裝
npm install webpack-dev-server -g
5. webpack-dev-server 幫咱們打包生成的 bundle.js 文件,並無存放到實際的物理磁盤上;而是直接託管到了 電腦的內存中,因此咱們在項目根目錄中,根本找不到這個打包好的bundle.js;
6. webpack-dev-server 把打包好的文件,以一種虛擬的形式託管到了項目的根目錄中,雖然咱們看不到它,可是能夠認爲和dist,src,node_modules 平級,有一個看不見的文件,叫作bundle.js
這裏遇到一個問題,我已經安裝過了webpack,可是仍是提示Error: Cannot find module 'webpack'。緣由多是webpack沒有本地安裝,從新安裝一下就行了。
執行cnpm install webpack webpack-cli -D,而後npm run dev ,成功!如今能夠點擊端口號打開項目的頁面,可是樣式仍是沒有變。緣由是剛開始在index.html裏寫死了<script src="../dist/bundle.js"></script>。改爲這樣就能夠自動打包編譯而且實時刷新瀏覽器<script src="/bundle.js"></script
配置 dev-server 命令參數的第二種形式。webpack4.x不進行plugins配置也能夠成功
webpack默認只能打包JS類型的處理文件,沒法處理其它非JS類型的文件,因此要安裝第三方loader
一、打包處理CSS文件,須要安裝cnpm i style-loader css-loader -D
cnpm i less-loader -D cnpm i less -D(這個是less-loader的內部依賴,不須要配置到webpack.config.js裏)
cnpm i sass-loader -D cnpm i node-sass -D(這個是sass-loader的內部依賴,不須要配置到webpack.config.js裏)
二、打開webpack.config.js配置文件,在裏面新增一個配置節點,叫作module,它是一個對象,在這個moudle對象上,有個rules屬性,
這個rules屬性是個數組,數組中存放了全部第三方文件支持的匹配和處理規則。
注意:webpack處理第三方文件類型的過程:
一、發現這個要處理的文件不是JS文件,而後就去配置文件中,查找有沒有對應的第三方 loader規則
二、若是能找到對應的規則,就會調用對應的 loader處理這種文件類型;
三、loader規則從右到左調用
四、當最後的一個loader 調用完畢,會把 處理的結果,直接交給 webpack 進行打包合併,最終輸出到bundle.js中去
cnpm i url-loader file-loader -D(file-loader是uel-loader的內部依賴,不須要配置到webpack.config.js裏)
給定兩個值limit和name,設置文件名爲原來的文件名和後綴名
注意:
module:{ rules:[ {test:/\.css$/,use:['style-loader','css-loader']},//正則表達式 {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, //圖片大小小於等於這個數,直接存url。大於這個會變成base64形式, {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=16094&name=[name].[ext]'}, {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//處理字體文件 ] }
結果:項目根目錄會多一個package.json文件
npm(node package manager):nodejs的包管理器,用於node插件管理(包括安裝、卸載、管理依賴等)
結果: 項目中多出node_modules包
做用:打包工具
做用:爲webpack打包生成的資源文件提供web服務。webpack-dev-server 主要提供兩個功能:
配置:
方法一:直接在package.json配置scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 6660 --contentBase src --hot"
}
方法二:
1.在webpack.config.js裏配置devServer。
2.package.json配置scripts dev
1 const path = require('path'); 2 const webpack = require('webpack') 3 const htmlWebpackPlugin = require('html-webpack-plugin') 4 module.exports={ 5 entry:path.join(__dirname,'./src/main.js'), 6 output:{ 7 path:path.resolve(__dirname,'./dist'), 8 filename:'bundle.js' 9 }, 10 devServer:{//這是配置dev-server命令參數的第二種形式,相對麻煩點 11 //--open --port 6660 --contentBase src --hot 12 open:true, 13 port:6660, 14 contentBase:'src', 15 hot:true 16 17 }, 18 plugins:[//配置插件的節點 19 new webpack.HotModuleReplacementPlugin(), 20 new htmlWebpackPlugin({ 21 template:path.join(__dirname,'./src/index.html'), 22 filename:'index.html' 23 }) 24 ], 25 };
做用:實現頁面或bundle.js內存託管功能
步驟:
1.在 webpack.config.js 中導入包
2. plugins配置插件的節點