前言
我們在開發項目時，會用到很多的靜態資源，我們在瀏覽器，瀏覽網頁時，網頁加載的速度就會變慢，而且有很多的文件都是相互依賴的。
由於文章排版問題可能影響小闊愛的閱讀，具體完整版可以關注 微信公衆號小帥搜
總結
網頁加載速度慢， 因爲 我們要發起很多的二次請求
要處理錯綜複雜的依賴關係
如何解決
合併、壓縮、精靈圖、圖片的Base64編碼
requireJS、也可以使用webpack可以解決各個包之間的複雜依賴關係
webpack是什麼呢
webpack 是前端的一個項目構建工具，它是基於 Node.js 開發出來的一個前端工具
藉助於webpack這個前端自動化構建工具，可以完美實現資源的合併、打包、壓縮、混淆等諸多功能。
下圖：看左邊許多的文件，文件與文件之間又存在關係，經過webpack打包之後，就形成了右邊的樣子，文件少，還無依賴。
從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。
webpack中文網 https://www.webpackjs.com/
Webpack的安裝
運行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令
在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中
項目初始化
創建如下目錄結構
初始化項目，會在項目的根目錄下生成一個package.json文件
npm init -y
安裝webpack和webpack-cli（webpack4.0以後需要單獨安裝）
npm install webpack webpack-cli --save-dev
安裝完成後，你會找到node_modules.bin\webpack
1
查看package.json文件
編寫index.js，簡單寫一句輸出語句即可
console.log(“ok”);
1
打包測試
輸入打包命令
webpack ./src/index.js -o ./dist/bundle.js
在webpack4.0以後，打包命令需要加-o，不然回報如下錯誤
1
成功，你會發現 dist 目錄下多了一個main.js的文件
在index.html中引入 dist 目錄下的main.js文件
1
打開瀏覽器後，運行index.html，F12打開控制檯，輸出ok就行
編寫webpack.config.js文件
const path = require(‘path’);
module.exports = {
// 配置入口（要打包的文件）
entry: path.join(__dirname, ‘./src/index.js’),
// 輸出文件相關配置
output: {
// 配置出口，指定打包好的文件存放路徑
path: path.join(__dirname, ‘./dist’),
// 要輸出的文件名
filename: ‘main.js’
},
mode: ‘development’
}
直接輸入webpack命令即可
你或許會遇見下面的黃色警告
黃色警告:是因爲webpack4引入了模式,有開發模式,生產模式,無這三個狀態
可以看到末尾並沒有生成我們所打包的main.js的信息
黃色部分的警告的意思是，沒有設置模式,有開發模式和生產模式兩種，
webpack.config.js添加屬性：mode: ‘development’
樣式的處理
普通CSS處理
首先在CSS目錄下新建一個index.css文件，寫點樣式
body {
background-color: green;
}
在index.js文件中，將css引入
import ‘./css/index.css’;
1
此時我們打包後，會報下面錯誤
You may need an appropriate loader to handle this file type,
currently no loaders are configured to process this file.
它的意思是說：沒有一個合適的加載器
這時我們需要安裝第三方loader加載器
css-loader：用於處理 css 文件，使得能在 js 文件中引入使用；
style-loader：用於將 css 文件注入到 index.html 中的
安裝命令
npm i style-loader css-loader --save-dev
webpack.config.js中，配置第三方匹配規則
// 配置第三方模塊
module: {
// 配置匹配規則
rules: [
{
test: /.css$/, // 匹配以後綴爲.css的文件
use: [‘style-loader’, ‘css-loader’]
}
]
}
test: 是一個正則表達式
use: 對應處理的 loader 插件名稱（處理順序是從右往左）
打包測試
可以看到樣式已經添加到
sass處理
在 css 目錄中，新建一個index.scss文件
body {
div {
width: 250px;
height: 250px;
border: 2px solid #000;
margin: 10px;
}
#a {
font-size: 20px;
}
#b {
color: red;
}
}
在index.html中，添加如下
2
index.js引入index.scss文件
import ‘./css/index.scss’;
安裝node-sass和sass-loader
npm i node-sass sass-loader --save-dev
1
webpack.config.js，配置module.rules匹配規則
{
test: /.scss$/,
use: [‘style-loader’, ‘css-loader’, ‘sass-loader’]
}
打包測試
打開F12後，已經成功了
（別問我爲什麼不截效果圖，因爲效果圖…好醜…）
ess處理
在 css 目錄中，新建一個index.less文件
body {
div {
color: #fff;
}
}
index.js引入index.less
import ‘./css/index.less’;
1
安裝less和less-loader
npm i less less-loader --save-dev
webpack.config.js中，配置module.rules匹配規則
{
test: /.less$/,
use: [‘style-loader’, ‘css-loader’, ‘less-loader’]
}
打包測試
F12查看，看得出來，成功了
開啓 SourceMap
先註釋掉這些東西
在index.js中
console.loo(“ok”);
別懷疑，對，就是console.loo()，很明顯，這個是一個錯誤的語句。
webpack.config.js中，開啓 source-map
module.exports = {
// …
devtool: ‘source-map’, // 開啓 source-map
// …
}
webpack.config.js中，module.rule 配置如下
rules: [
{
test: /.(sc|sa|le|c)ss$/,
use: [
“style-loader”,
{
loader: ‘css-loader’,
options: {sourceMap:true}
},
{
loader: ‘sass-loader’,
options: {sourceMap: true}
},
{
loader: ‘less-loader’,
options: {sourceMap: true}
}
]
}
]
打包測試，打包信息多了條信息，在dist目錄下，多了個main.js.map文件，這個文件裏面是映射的對應關係
可以發現，具體的報錯信息以及定位，一目瞭然
來看看CSS的
處理圖片
安裝url-loader和file-loader
npm i url-loader file-loader --save-dev
1
webpack.config.js中，配置module.rules
rules: [
{
test: /.(png|jpg|gif|bmp|jpeg)$/,
use: [‘url-loader’]
}
]
給頁面中#a添加一張背景圖
打包測試
查看元素，你會看到一串 Base64 的字符串
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEB
…
FFFABRRRQB/9k=
關於url-loader的一些參數
use: [‘url-loader?limit=53251&name=[hash:8]-name.ext’]
1
limit：當圖片大小，大於指定字節數時，就不會轉爲base64字符串
安裝 webpack-dev-server
作用：我們每次只要把文件修改一下，就需要進行重新打包，這樣非常麻煩，而webpack-dev-server就是爲此誕生的。
安裝
npm i webpack-dev-server --save-dev
打開package.json，配置scripts，如下
“scripts”: {
// …
“webpack-dev-server”: “webpack-dev-server”
// …
},
key可以隨意，你可以直接寫成dev，我這樣寫，也僅僅只是隨便記住這個單詞，哈哈。
運行
npm run webpack-dev-server
你會看到這兩條信息
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
第一條：項目運行地址
第二條：輸出文件的位置在/下，也就是項目根目錄下
修改index.js中的代碼，重新刷新瀏覽器（不用重新打包），也發現沒有任何效果，那是因爲輸出文件被放到項目根目錄下了
修改main.js引入路徑
修改webpack-dev-server配置
“scripts”: {
// …
“webpack-dev-server”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
// …
},
open：自動打開瀏覽器
port：修改端口號
contentBase：指定項目運行根目錄
hot：啓用熱更新
修改完成後，重新打包即可看到效果
webpack-dev-server的第二種配置方式（瞭解）
webpack.config.js中，module.exports 配置屬性
devServer: {
open: true,
port: 8888,
contentBase: ‘src’,
hot: true // 啓用熱更新的第一步
}
啓用熱更新第二步，webpack.config.js中，頂部引入
const webpack = require(‘webpack’);
啓用熱更新第三步，webpack.config.js中，module.exports配置屬性
plugins: [
// 創建熱更新的模板對象
new webpack.HotModuleReplacementPlugin()
]
JavaScript 處理
有些時候，我們寫的ES6代碼，瀏覽器並不支持，所以需要將ES6的代碼，轉爲更低級的，瀏覽器可以識別的。
index.js編寫一段ES6代碼
class Person {
static info = {
name: ‘小靈’,
age: 17
}
}
console.log(Person.info);
安裝相關包
cnpm i babel-loader @babel/core @babel/preset-env -D
cnpm i @babel/plugin-proposal-class-properties -D
webpack.config.js配置如下，配置module.rules
rules: [
{
test: /.js$/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’],
plugins: [’@babel/plugin-proposal-class-properties’]
}
},
exclude: /node_modules/
}
]
options這一塊可以移到項目根目錄的.babelrc文件
{
“presets”: ["@babel/env"],
“plugins”: ["@babel/proposal-class-properties"]
}
執行 npm run webpack-dev-server
vue 組件處理
安裝vue-loader和vue-template-compiler
cnpm i vue vue-loader vue-template-compiler -D
index.js導入Vue
import Vue from ‘vue’;
因爲導入的Vue，功能不完善，只提供了 runtime-only 的方式，默認是導入dist/vue.runtime.common.js的，所以需要修改一下
直接修改路徑
import Vue from ‘…/node_modules/vue/dist/vue.js’
也可以在webpack.config.js中添加如下（推薦）
module.exports = {
// …
resolve: {
alias: {
“vue$”: “vue/dist/vue.js”
}
}
// …
}
webpack.config.js中，在 vue-loader 15.* 之後，要添加如下
const vueLoaderPlugin = require(‘vue-loader/lib/plugin’);
webpack.config.js中，plugins 配置如下
module.exports = {
// …
plugins: [
new vueLoaderPlugin()
]
// …
}
創建App.vue組件
注意：在.vue組件中，只能有、
App 組件
webpack.config.js中，module.rules 配置屬性rules: [
{test: /.vue/, use: ‘vue-loader’}
]
index.html添加如下
import App from ‘./js/App.vue’;
index.js中，創建Vue實例對象
var vm = new Vue({
el: ‘#app’,
render: function(createElements) {
return createElements(App);
}
});
[Vue warn]: Cannot find element: #app
是因爲頁面還沒加載完，所以找不到此元素，我們直接把
路由 router
安裝vue-router
cnpm i vue-router -D
index.js如下
import Vue from ‘vue’;
import VueRouter from ‘vue-router’
// 手動安裝 VueRouter
Vue.use(VueRouter);
// 導入 login 組件
import login from ‘./js/login.vue’
// 創建路由對象
var router = new VueRouter({
routes: [
{path: ‘/login’, component: login}
]
});
var vm = new Vue({
el: ‘#app’,
render: els => els(App),
router
});
export default 和 export
ES6中的導入和導出
導入：
import 模塊名稱 from 模塊標識符
import 路徑
導出：
export default
export
注意：
export default 此方式導出，外部可以使用任意變量接收
export default 同一個模塊中，只允許導出一次
export 此方式導出，外部必須嚴格按照導出的指定的變量名接收
export 外部使用 { 導出的變量名, … } 的形式接收
export 外部可以設置別名：{ 導出的變量名 as 別名, … }
Node的導入和導出
導入：
var 名稱 = require(模塊標識符)
導出：
module.exports
exports
組件中style標籤的 lang 屬性 和 scope 屬性
lang：指定CSS的語言，可以是sacc,scss,less等
scope：不寫，則默認樣式爲全局，反之則局部，它的原理是利用屬性選擇器
html-webpack-plugin 插件
安裝
cnpm i html-webpack-plugin -D
webpack.config.js引入
const htmlWebpackPlugin = require(‘html-webpack-plugin’);
webpack.config.js，module.plugins配置如下
plugins: [
// 在內存中生成一個 HTML 插件
new htmlWebpackPlugin({
// 指定模板頁面
template: path.join(__dirname, ‘./src/index.html’),
// 指定生成的文件名
filename: ‘index.html’
})
],
打包測試之後，在瀏覽器中，控制檯中，會發現有以VM開頭的文件
import找包的規則：
找項目根目錄中有沒有node_modules的文件夾
在node_modules 中根據包名，找對應的文件夾
在文件夾中，找到一個叫做 package.json 的包配置文件
在package.json中，找到main屬性，屬性值是這個包在被加載時的入口文件
–save 可以簡寫爲-S, --save-dev可以簡寫爲-D
掃描二維碼
獲取更多精彩
小帥搜
往期推薦
Linux系統下添加硬盤和分區詳細教程
9.）PHPWeb開發框架~Laravel入門路由配置和使用規則介紹
10.）PHPWeb開發框架~Laravel自帶php artisan 命令行接口集合列表
11.）PHPWeb開發框架~Laravel開發環境安裝配置與要求
12.）PHPWeb開發框架~使用composer安裝Laravel框架踩坑記錄（附解決方案）
14.）PHPWeb開發框架~Laravel接收用戶的輸入的類
看都看完了，還不點這裏試試