恢復內容開始 一、webpack 預設只能打包處理 JS 類型的文件，無法處理 其他的非 JS 類型的文件； 如果非要處理 非 JS 類型的文件，我們需要手動安裝一些 合適 第三方 loader 載入器； 二、webpack 處理第三方文件類型的過程： 1、發現這個要處理的文件不是JS文件，然後就去 ...
---恢復內容開始---
一、webpack 預設只能打包處理 JS 類型的文件，無法處理 其他的非 JS 類型的文件；
如果非要處理 非 JS 類型的文件，我們需要手動安裝一些 合適 第三方 loader 載入器；
二、webpack 處理第三方文件類型的過程：
1、發現這個要處理的文件不是JS文件，然後就去配置文件中，查找有沒有對應的第三方 loader 規則；
2、如果能找到對應的規則，就會調用 對應的 loader 處理 這種文件類型；
3、在調用 loader 的時候，是從後往前調用的；
4、當最後的 一個 loader 調用完畢 ，會把處理的結果，直接給webpack 進行 打包合併，最終輸出到bundle.js中去。
三、導入CSS文件：
1、安裝 npm i style-loader css-loader -D
2、打開 webpack.config.js 這個配置文件，在裡面，新增一個配置節點，叫做 module,它是一個對象；
在這個 module 對象身上，有個 rules 屬性，這個 rules 屬性是個數組，這個數組中，存在了所有第三方文件的匹配和處理規則。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <!-- 直接引入main.js會因為ES6新語法的問題，瀏覽器不識別 通過webpack這個前端構建工具，把main.js轉成bundle.js --> <!-- 代碼 webpack-dev-server 會將生成一個虛擬的bundle.js的文件，減少記憶體！ --> <!-- <script src="http://localhost:8081/bundle.js"></script> --> <!-- 當使用 html-webpack-plugin 之後，我們不再需要手動處理 bundle.js 的引用路徑了 因為，這個插件，已經幫我們自動創建了一個合適的 script ，並且，引用了正確的路徑--> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" /> <!-- npm i bootstrap -S --> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <div class="box"></div> <!-- <span class="glyphicon glyphicon-search" aria-hidden="true"></span> --> </body> </html>
html,
body {
padding: 0;
margin: 0;
li {
font-size: 12px;
line-height: 30px;
}
.box {
width: 220px;
height: 120px;
background: url("../images/moye.jpg");
background-size: cover;
}
}
//這是項目JS的主入口文件
//全局安裝webpack npm i webpack -g (i 為 install g為 global 全局)
//輸入 npm init -s
// (這個命令會在當前目錄生成一個package.json文件，這個文件中會記錄一些關於項目的信息，
// 比如：項目的作者，git地址，入口文件、命令設置、項目名稱和版本號等等，一般情況下這個文件是必須要有的，
// 方便後續的項目添加和其他開發人員的使用。)
// (--save、-S參數意思是把模塊的版本信息保存到dependencies（生產環境依賴）中，
// 即你的package.json文件的dependencies欄位中)
// npm i jquery -S 導入jquery
// --save、-S參數意思是把模塊的版本信息保存到dependencies（生產環境依賴）中，
// 即你的package.json文件的dependencies欄位中
//由於ES6的代碼，太高級了，瀏覽器解析不了，需要進行轉換
import $ from "jquery";
import "./css/index.css";
import "./css/index.less";
import "./css/index.scss";
// import "bootstrap/dist/css/bootstrap.css"; 引入node_mudules中的文件，前面不需要加此路徑，
$(function() {
$("li:odd").css("backgroundColor", "yellow");
$("li:even").css("backgroundColor", function() {
return "#" + "D97634";
});
});
// 1.webpack能夠處理JS文件的相互依賴關係；
// 2.webpack能夠處理JS的相容問題，把高級的、瀏覽器不能識別的語法，轉為
//低級的，瀏覽器能正常識別的語法；
// webpack 要打包的文件的路徑 打包好的輸出的文件的路徑
//因版本不一樣，無法進行文件的轉換，在package.json中導致寫下以下兩行代碼
// "dev": "webpack --mode development",
// "build": "webpack --mode production"這樣才能將main.js轉為bundle.js
//使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能：是一個用來快速搭建本地運行環境的工具
//1. 運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴；
//2.安裝完畢後，這個工具的用法 和 webpack 命令的用法，完全一樣；
//3.由於，我們是在項目中，本地安裝的 webpack-dev-server ，所以，無法把它當作腳本命令，
// 在powershell 終端中直接執行；（只有那些安裝到全局-g的工具，才能在終端中正常執行）
//4.webpack-dev-server 這個工具，如果想要正常運行，要求，在本地項目中，必須安裝webpack;
//5.webpack-dev-server 幫我們打包生成的 bunld.js 文件，並沒有存放到 實際 的物理磁碟上，
// 而是，直接托管到了 電腦的記憶體中，所以，我們在項目根目錄中，根本找不到這個打包好的 bundle.js
//6.我們可以認為，webpack-dev-server 把打包好的文件，以一種虛擬的形式，托管到了 咱們項目的根目錄中，
// 雖然我們看不到它，但是，可以認為 和 dist src node_modules 平級，有一個看不見的文件，叫做 bundle.js
// "dev": "webpack-dev-server --open --port 8081 --contentBase src --hot",
// -直接打開-埠號 -要顯示的頁面路徑(這下麵的index.html) -減少源代碼的刷新
{
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"webpack-cli": "^3.3.5"
},
"devDependencies": {
"css-loader": "^3.0.0",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"node-loader": "^0.6.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"scss-loader": "0.0.1",
"style-loader": "^0.23.1",
"url-loader": "^2.0.1",
"webpack": "^4.35.2",
"webpack-dev-server": "^3.7.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 8081 --contentBase src --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC"
}
const path = require("path"); // 導入在記憶體中生成HTML頁面的插件 //只要是插件，都一定要放到 plugins節點中去 //這個插件的兩個作用： //1.自動在記憶體中根據指定頁面生成一個記憶體的頁面； //2.自動，把打包好的 bundle.js 追加到頁面中去 const htmlWebpackPlugin = require("html-webpack-plugin"); //這個配置文件其實就是一個JS文件，通過NODE中的操作，向外暴露一個配置對象 module.exports = { entry: path.join(__dirname, "./src/main.js"), //入口，要打包的文件 output: { //輸出相關配置 path: path.join(__dirname, "./dist"), //指定打包好的文件，輸出到哪個文件夾目錄中去 filename: "bundle.js" //指定輸出的文件名稱 }, mode: "development", //因為版本不一樣，需要添加這個才能完成輸出！！！ plugins: [ //配置插件的節點 new htmlWebpackPlugin({ //創建一個在記憶體中生成HTML 頁面的插件 template: path.join(__dirname, "./src/index.html"), //指定模板頁面，將會根據指定的頁面路徑， //去生成記憶體中的頁面 filename: "index.html" // 指定生成的頁面的名稱 }) ], module: { //這個節點，用於配置所有的第三方模塊載入器 rules: [ // 所有第三方模塊的匹配規則 { test: /\.css$/, use: ["style-loader", "css-loader"] }, //配置處理.css文件的第三方loader規則 { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }, //處理.less文件 { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }, //處理.scss文件 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=616&name=[hash:8]-[name].[ext]" } //處理圖片文件 npm i url-loader file-loader -D //limit 給定的值，是圖片的大小，單位是byte，如果我們引用的圖片，大於或等於給定的值， // 則不會被轉為base64 格式的字元串，如果小於給定的值，則會轉為base64的字元串 //哈希值 正常為32位，這裡面隨便設置幾位，為了區分兩個同名的圖片 // { // test: /\.(ttf|eot|svg|woff|woff2)$/, // use: "url-loader" //處理字體文件 // } ] } }; //在控制台輸入 webpack 對項目進行打包，此時webpack進行以下幾步： //1.首先，webpack發現，我們並沒有通過命令的形式，給它指定入口和出口； //2.webpack就會去項目的根目錄中，查找一個叫做' webpack.config.js'的配置文件； //3.當找到配置文件後，webpack 會去解析執行這個配置文件，當解析執行完配置文件後， // 就得到了配置文件中，導出的配置對象； //4.當webpack 拿到配置對象後，就拿到了配置對象中，指定的入口和出口，然後進行打包構建。
