webpack學習筆記整理
1 、webpack-dev-server基本使用
使用webpack-dev-server 這個工具，來實現自動打包編譯的功能
- 運行
npm i webpack-dev-server -D把工具安裝到項目的安裝依賴 - 安裝完畢後，這個工具的用法與webpack一樣
- 由於是本地安裝，所以，無法把它當做腳本命令，在終端執行。
- 注意：
webpack-dev-server這個工具，如果想要正常運行，要求在本地安裝 webpack。 webpack-dev-server生成的文件沒有放在實際的物理磁盤。
2、webpack-dev-server 啓動失敗解決方法
在package.json中加入以下代碼
"devDependencies": {
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
在終端輸入npm i 重新安裝
3、退出webpack-dev-serve
Ctrl + C。
4、webpack-dev-serve打包生成的bundle.js並沒有放到物理磁盤，而是直接託管到電腦內存中。
即根目錄下。
5、啓動webpack-dev-serve的參數
| 參數 | 含義 |
|---|---|
| –open | 啓動服務器自動打開瀏覽器 |
| –port | 指定端口號 |
| –contentBase 目錄名 | 打開指定目錄 |
| –hot | 熱重載 |
注意：參數前面是兩條槓
6、把html文件打包到內存
當使用該插件後就不需要處理bundle.js的引入路徑了
-
cnpm i html-webpack-plugin -D安裝插件 -
const htmlWebpackPlugin = require('html-webpack-plugin')導入插件 -
指定輸出目錄
new htmlWebpackPlugin({ template:path.join(__dirname,'./src/index.html'), //指定模板頁面,即會被加載到內存中的頁面 filename:'index.html' //指定生成頁面的名稱}）
7、處理css文件
- 安裝 style-loader 、css-loader 兩個文件：
cnpm i style-loader css-loader -D - 匹配規則
module:{ //這個節點用於配置 第三方 加載器
rules:[ //所有第三方模塊的 匹配規則
{ test : /\.css$/, use: [ 'style-loader', 'css-loader'] },//配置處理css文件的第三方loader
]
}
3.導入css文件：import './css/index.css'（前提是該文件已存在）
8、處理less文件
- 在能夠處理css文件的基礎上，安裝
less,和less-loader兩個文件：cnpm i less less-loader -D { test : /\.less$/, use: [ 'style-loader', 'css-loader','less-loader'] }//配置處理.less的第三方loader規則- 導入css文件：
import './css/index.less'（前提是該文件已存在）
9、處理scss文件
- 在能夠處理css文件的基礎上，安裝
sass,和node-sass兩個文件：cnpm i sass node-sass -D { test : /\.scss$/, use: [ 'style-loader', 'css-loader','sass-loader'] }//配置處理.scss的第三方loader規則- 導入css文件：
import './css/index.scss'（前提是該文件已存在） - 要特別注意，scss與sass，不要搞錯了
10、處理圖片文件
- 安裝
url-loader file-loader，兩個文件：cnpm i url-loader file-loader -D { test : /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' },//配置處理圖片文件的第三方loader規則
11、webpack 處理 vue
- 安裝vue包 cnpm i vue -S
- 由於在 webpack 中，推薦使用 vue 這個模板文件定義組件，所以，需要安裝 能解析這種文件的 loader ，即
cnpm i vue-loader vue-template-complier -D - 在main.js中，導入vue模塊
import Vue from '../node_modules/vue/dist/vue.js'（完整版） - 定義一個 vue 結尾組件，其中有三部分組成 template，script，style
- 使用
import xxx from 'xxx'導入這個組件 - 創建 vm 的實例
var vm = new Vue({el:'#app',render:c => c(login)}) - 在頁面中創建一個id爲app的div元素，作爲我們 vm 實例要控制的區域