webpack使用 - 簡書

vue-cli已經(jīng)配置好webpack

能夠了解模塊化的相關(guān)規(guī)范

了解webpack

1.模塊化的分類

A.瀏覽器端的模塊化

    1).AMD(Asynchronous Module Definition,異步模塊定義)
    代表產(chǎn)品為：Require.js
    2).CMD(Common Module Definition,通用模塊定義)
    代表產(chǎn)品為：Sea.js

B.服務(wù)器端的模塊化

    服務(wù)器端的模塊化規(guī)范是使用CommonJS規(guī)范：
    1).使用require引入其他模塊或者包
    2).使用exports或者module.exports導(dǎo)出模塊成員
    3).一個文件就是一個模塊择份，都擁有獨立的作用域

C.ES6模塊化

    ES6模塊化規(guī)范中定義：
        1).每一個js文件都是獨立的模塊
        2).導(dǎo)入模塊成員使用import關(guān)鍵字
        3).暴露模塊成員使用export關(guān)鍵字

小結(jié)：推薦使用ES6模塊化蔓罚，因為AMD轿曙，CMD局限使用與瀏覽器端，而CommonJS在服務(wù)器端使用偷办。
ES6模塊化是瀏覽器端和服務(wù)器端通用的規(guī)范.

2.在NodeJS中安裝babel

A.安裝babel

打開終端，輸入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安裝完畢之后床玻，再次輸入命令安裝：npm install --save @babel/polyfill

B.創(chuàng)建babel.config.js

在項目目錄中創(chuàng)建babel.config.js文件仲智。
編輯js文件中的代碼如下：
    const presets = [
        ["@babel/env",{
            targets:{
                edge:"17",
                firefox:"60",
                chrome:"67",
                safari:"11.1"
            }
        }]
    ]
    //暴露
    module.exports = { presets }

C.創(chuàng)建index.js文件

在項目目錄中創(chuàng)建index.js文件作為入口文件
在index.js中輸入需要執(zhí)行的js代碼，例如：
    console.log("ok");

D.使用npx執(zhí)行文件

打開終端饲漾，輸入命令：npx babel-node ./index.js

3.設(shè)置默認(rèn)導(dǎo)入/導(dǎo)出

A.默認(rèn)導(dǎo)出

export default {
    成員A,
    成員B,
    .......
},
let num = 100;

B.默認(rèn)導(dǎo)入

import test from "./test.js"

注意：在一個模塊中蝙搔，只允許使用export default向外默認(rèn)暴露一次成員，千萬不要寫多個export default考传。
如果在一個模塊中沒有向外暴露成員吃型，其他模塊引入該模塊時將會得到一個空對象

4.設(shè)置按需導(dǎo)入/導(dǎo)出

A.按需導(dǎo)出

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

B.按需導(dǎo)入

import { num,fn as printFn ,myName } from "./test.js"
//同時導(dǎo)入默認(rèn)導(dǎo)出的成員以及按需導(dǎo)入的成員
import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一個模塊中既可以按需導(dǎo)入也可以默認(rèn)導(dǎo)入，一個模塊中既可以按需導(dǎo)出也可以默認(rèn)導(dǎo)出

5.直接導(dǎo)入并執(zhí)行代碼

import "./test2.js";

6.webpack的概念

webpack是一個流行的前端項目構(gòu)建工具僚楞，可以解決目前web開發(fā)的困境勤晚。
webpack提供了模塊化支持，代碼壓縮混淆泉褐，解決js兼容問題赐写，性能優(yōu)化等特性，提高了開發(fā)效率和項目的可維護性

7.webpack的基本使用

A.創(chuàng)建項目目錄并初始化

創(chuàng)建項目膜赃，并打開項目所在目錄的終端挺邀，輸入命令：
    npm init -y

B.創(chuàng)建首頁及js文件

在項目目錄中創(chuàng)建index.html頁面，并初始化頁面結(jié)構(gòu)：在頁面中擺放一個ul跳座，ul里面放置幾個li
在項目目錄中創(chuàng)建js文件夾端铛，并在文件夾中創(chuàng)建index.js文件

C.安裝jQuery

打開項目目錄終端，輸入命令:
npm install jQuery -S

D.導(dǎo)入jQuery

打開index.js文件疲眷，編寫代碼導(dǎo)入jQuery并實現(xiàn)功能：
import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

注意：此時項目運行會有錯誤禾蚕，因為import $ from "jquery";這句代碼屬于ES6的新語法代碼，在瀏覽器中可能會存在兼容性問題
所以我們需要webpack來幫助我們解決這個問題狂丝。

E.安裝webpack

1).打開項目目錄終端换淆，輸入命令:
npm install webpack webpack-cli -D
2).然后在項目根目錄中虚倒，創(chuàng)建一個 webpack.config.js 的配置文件用來配置webpack
在 webpack.config.js 文件中編寫代碼進行webpack配置，如下：
module.exports = {
mode:"development"http://可以設(shè)置為development(開發(fā)模式)产舞，production(發(fā)布模式)
}
補充：mode設(shè)置的是項目的編譯模式。
如果設(shè)置為development則表示項目處于開發(fā)階段菠剩，不會進行壓縮和混淆易猫，打包速度會快一些
如果設(shè)置為production則表示項目處于上線發(fā)布階段，會進行壓縮和混淆具壮，打包速度會慢一些
3).修改項目中的package.json文件添加運行腳本dev准颓，如下：
"scripts":{
"dev":"webpack"
}
注意：scripts節(jié)點下的腳本，可以通過 npm run 運行棺妓，如：
運行終端命令：npm run dev
將會啟動webpack進行項目打包
4).運行dev命令進行項目打包攘已，并在頁面中引入項目打包生成的js文件
打開項目目錄終端，輸入命令:
npm run dev
等待webpack打包完畢之后怜跑，找到默認(rèn)的dist路徑中生成的main.js文件样勃，將其引入到html頁面中。
瀏覽頁面查看效果性芬。

8.設(shè)置webpack的打包入口/出口

在webpack 4.x中峡眶，默認(rèn)會將src/index.js 作為默認(rèn)的打包入口js文件
默認(rèn)會將dist/main.js 作為默認(rèn)的打包輸出js文件
如果不想使用默認(rèn)的入口/出口js文件，我們可以通過改變 webpack.config.js 來設(shè)置入口/出口的js文件植锉，如下：
const path = require("path");
module.exports = {
mode:"development",
//設(shè)置入口文件路徑
entry: path.join(__dirname,"./src/xx.js"),
//設(shè)置出口文件
output:{
//設(shè)置路徑
path:path.join(__dirname,"./dist"),
//設(shè)置文件名
filename:"res.js"
}
}

9.設(shè)置webpack的自動打包

默認(rèn)情況下辫樱，我們更改入口js文件的代碼，需要重新運行命令打包webpack俊庇，才能生成出口的js文件
那么每次都要重新執(zhí)行命令打包狮暑，這是一個非常繁瑣的事情，那么辉饱，自動打包可以解決這樣繁瑣的操作搬男。
實現(xiàn)自動打包功能的步驟如下：
A.安裝自動打包功能的包:webpack-dev-server
npm install webpack-dev-server -D
B.修改package.json中的dev指令如下：
"scripts":{
"dev":"webpack-dev-server"
}
C.將引入的js文件路徑更改為：<script src="/bundle.js"></script>
D.運行npm run dev，進行打包
E.打開網(wǎng)址查看效果：http://localhost:8080

注意：webpack-dev-server自動打包的輸出文件鞋囊，默認(rèn)放到了服務(wù)器的根目錄中.

補充：
在自動打包完畢之后止后，默認(rèn)打開服務(wù)器網(wǎng)頁，實現(xiàn)方式就是打開package.json文件溜腐，修改dev命令：
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

10.配置html-webpack-plugin

使用html-webpack-plugin 可以生成一個預(yù)覽頁面译株。
因為當(dāng)我們訪問默認(rèn)的 http://localhost:8080/的時候，看到的是一些文件和文件夾挺益，想要查看我們的頁面
還需要點擊文件夾點擊文件才能查看歉糜，那么我們希望默認(rèn)就能看到一個頁面，而不是看到文件夾或者目錄望众。
實現(xiàn)默認(rèn)預(yù)覽頁面功能的步驟如下：
A.安裝默認(rèn)預(yù)覽功能的包:html-webpack-plugin
npm install html-webpack-plugin -D
B.修改webpack.config.js文件匪补，如下：
//導(dǎo)入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//創(chuàng)建對象
const htmlPlugin = new HtmlWebpackPlugin({
//設(shè)置生成預(yù)覽頁面的模板文件
template:"./src/index.html",
//設(shè)置生成的預(yù)覽頁面名稱
filename:"index.html"
})
C.繼續(xù)修改webpack.config.js文件伞辛，添加plugins信息：
module.exports = {
......
plugins:[ htmlPlugin ]
}

11.webpack中的加載器

通過loader打包非js模塊：默認(rèn)情況下，webpack只能打包js文件夯缺，如果想要打包非js文件蚤氏，需要調(diào)用loader加載器才能打包
loader加載器包含：
1).less-loader
2).sass-loader
3).url-loader:打包處理css中與url路徑有關(guān)的文件
4).babel-loader:處理高級js語法的加載器
5).postcss-loader
6).css-loader,style-loader

注意：指定多個loader時的順序是固定的，而調(diào)用loader的順序是從后向前進行調(diào)用

A.安裝style-loader,css-loader來處理樣式文件
1).安裝包
npm install style-loader css-loader -D
2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設(shè)置需要匹配的文件類型踊兜，支持正則
test:/.css $/, //use表示該文件類型需要調(diào)用的loader use:['style-loader','css-loader'] } ] } } B.安裝less,less-loader處理less文件 1).安裝包 npm install less-loader less -D 2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組 module.exports = { ...... plugins:[ htmlPlugin ], module : { rules:[ { //test設(shè)置需要匹配的文件類型竿滨，支持正則 test:/\.css$ /,
//use表示該文件類型需要調(diào)用的loader
use:['style-loader','css-loader']
},
{
test:/.less $/, use:['style-loader','css-loader','less-loader'] } ] } } C.安裝sass-loader,node-sass處理less文件 1).安裝包 npm install sass-loader node-sass -D 2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組 module.exports = { ...... plugins:[ htmlPlugin ], module : { rules:[ { //test設(shè)置需要匹配的文件類型，支持正則 test:/\.css$ /,
//use表示該文件類型需要調(diào)用的loader
use:['style-loader','css-loader']
},
{
test:/.less $/, use:['style-loader','css-loader','less-loader'] }, { test:/\.scss$ /,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
補充：安裝sass-loader失敗時捏境，大部分情況是因為網(wǎng)絡(luò)原因于游，詳情參考：
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

D.安裝post-css自動添加css的兼容性前綴（-ie-,-webkit-）
1).安裝包
npm install postcss-loader autoprefixer -D
2).在項目根目錄創(chuàng)建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
plugins:[ autoprefixer ]
}
3).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設(shè)置需要匹配的文件類型，支持正則
test:/.css $/, //use表示該文件類型需要調(diào)用的loader use:['style-loader','css-loader','postcss-loader'] }, { test:/\.less$ /,
use:['style-loader','css-loader','less-loader']
},
{
test:/.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}

E.打包樣式表中的圖片以及字體文件
在樣式表css中有時候會設(shè)置背景圖片和設(shè)置字體文件垫言，一樣需要loader進行處理
使用url-loader和file-loader來處理打包圖片文件以及字體文件
1).安裝包
npm install url-loader file-loader -D
2).配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設(shè)置需要匹配的文件類型贰剥，支持正則
test:/.css $/, //use表示該文件類型需要調(diào)用的loader use:['style-loader','css-loader'] }, { test:/\.less$ /,
use:['style-loader','css-loader','less-loader']
},
{
test:/.scss $/, use:['style-loader','css-loader','sass-loader'] },{ test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$ /,
//limit用來設(shè)置字節(jié)數(shù)，只有小于limit值的圖片筷频，才會轉(zhuǎn)換
//為base64圖片
use:"url-loader?limit=16940"
}
]
}
}

F.打包js文件中的高級語法：在編寫js的時候蚌成，有時候我們會使用高版本的js語法
有可能這些高版本的語法不被兼容，我們需要將之打包為兼容性的js代碼
我們需要安裝babel系列的包
A.安裝babel轉(zhuǎn)換器
npm install babel-loader @babel/core @babel/runtime -D
B.安裝babel語法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在項目根目錄創(chuàng)建并配置babel.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
D.配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設(shè)置需要匹配的文件類型凛捏，支持正則
test:/.css $/, //use表示該文件類型需要調(diào)用的loader use:['style-loader','css-loader'] }, { test:/\.less$ /,
use:['style-loader','css-loader','less-loader']
},
{
test:/.scss $/, use:['style-loader','css-loader','sass-loader'] },{ test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$ /,
//limit用來設(shè)置字節(jié)數(shù)笑陈，只有小于limit值的圖片，才會轉(zhuǎn)換
//為base64圖片
use:"url-loader?limit=16940"
},{
test:/.js$/,
use:"babel-loader",
//exclude為排除項葵袭，意思是不要處理node_modules中的js文件
exclude:/node_modules/
}
]
}
}