第一節：Webpack簡介、安裝-配置-打包、常用loader的使用(css/style/less/postcss-loader)

本文轉載自查看原文 2021-09-15 15:29 110 09-Vue全家桶

一. 簡介

1. Webpack背景

(1). 事實上隨着前端的快速發展，目前前端的開發已經變的越來越復雜了：

　A. 比如開發過程中我們需要通過模塊化的方式來開發；

　B. 比如也會使用一些高級的特性來加快我們的開發效率或者安全性，比如通過ES6+、TypeScript開發腳本邏輯，通過sass、less等方式來編寫css樣式代碼；

　C. 比如開發過程中，我們還希望實時的監聽文件的變化來並且反映到瀏覽器上，提高開發的效率；

　D. 比如開發完成后我們還需要將代碼進行壓縮、合並以及其他相關的優化；

(2). 但是對於很多的前端開發者來說，並不需要思考這些問題，日常的開發中根本就沒有面臨這些問題：

　A. 這是因為目前前端開發我們通常都會直接使用三大框架來開發：Vue、React、Angular；

　B. 但是事實上，這三大框架的創建過程我們都是借助於腳手架（CLI）的；

　C. 事實上Vue-CLI、create-react-app、Angular-CLI都是基於webpack來幫助我們支持模塊化、less、TypeScript、打包優化等的；

2. Webpack是什么？

官方解釋：webpack is a static module bundler for modern JavaScript applications. （ webpack是一個靜態的模塊化打包工具，為現代的JavaScript應用程序；）

PS：

打包bundler：webpack可以將幫助我們進行打包，所以它是一個打包工具
靜態的static：這樣表述的原因是我們最終可以將代碼打包成最終的靜態資源（部署到靜態服務器）；
模塊化module：webpack默認支持各種模塊化開發，ES Module、CommonJS、AMD等；
現代的modern：我們前端說過，正是因為現代前端開發面臨各種各樣的問題，才催生了webpack的出現和發展；

官網地址：https://webpack.docschina.org/ （中文版）

https://webpack.js.org/ (英文版)

3. 使用Webpack的前提

　需要安裝nodejs，安裝步驟詳見：https://www.cnblogs.com/yaopengfei/p/14478126.html

該系列使用的node版本和npm版本如下：

4. 全局安裝和默認打包

(PS：這里主要是為了進行快速入門，進行全局安裝和簡單的打包，在實際開發中，很少這么用，都是局部安裝，項目不同，可能安裝的webpack版本也不同)

說明：

(1). 全局安裝webpack，指令和版本如下

【npm install webpack webpack-cli -g】

(2). 新建1個工程，在src/js文件夾下，新建t1.js 和 t2.js

t1.js 是commonjs的寫法，代碼如下

// 下面是commonjs的寫法
const getPrice=function(){
    return "$100";
}
// 對外導出
module.exports={
    getPrice
}

View Code

t2.js 是 ES6 Module的寫法，代碼如下

// 下面是  ES6 的寫法
export function sum(num1,num2){
    return num1+num2;
}

View Code

(3). 在src目錄下新建index.js文件，然后導入t1.js 和 t2.js

// commonjs的導入
const {getPrice}=require('./js/t1');
// ES6的導入
import {sum} from './js/t2.js';

// 調用
console.log(getPrice());
console.log(sum(10,20));

View Code

(4). 運行下面指令進行打包

【webpack】

當我們運行webpack時，webpack會查找當前目錄下的 src/index.js作為入口；然后在dist文件夾下生成main.js打包后的文件，這就是默認規范 (如果當前項目中沒有存在src/index.js文件，那么會報錯)。

PS：也可以指定入口文件，指定打包后的文件名和存放路徑。

【 npx webpack --entry ./src/index.js --output-path ./build】

(5). 引入打包后的文件，進行運行。

    <body>
        <div>測試打包問題</div>
        
        <!-- 報錯 -->
        <!-- <script src="src/index.js" ></script> -->
        
        <!-- 調用打包后的文件 -->
        <script src="dist/main.js" ></script>
        
    </body>

二. 局部安裝和配置打包

1. 局部安裝和默認打包

(1). 准備基礎項目

　src/js下的t1.js 、t2.js； src下的index.js

(2). 運行指令【npm init -y】初始化項目

(3). 運行下面指令，進行webpack的局部安裝(且開發依賴)

【npm install webpack webpack-cli -D】

生成的package.json文件如下：

{
  "name": "01_webpack_localBundle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0"
  }
}

(4). 運行指令【npx webpack】進行打包

　(或者將package.json中scripts標簽進行如下改變，然后運行指令【npm run build】進行打包)

 "scripts": {
   "build": "webpack"
  },

同樣會在dist文件夾下生成1個main.js文件，調用即可。

2. 通過配置文件打包（推薦）

(1). 新建 webpack.config.js 配置文件（默認名稱就叫這個，不建議改）

　　指定入口文件、打包后的存放路徑、打包后的文件

// 這里必須通過 commonjs的寫法配置，不能寫 ES6的寫法
const path = require('path');

module.exports = {
  entry: "./src/main.js",                      //入口文件
  output: {
    path: path.resolve(__dirname, "./build"),  //打包后存放路徑, 必須寫絕對路徑
    filename: "bundle.js"                      //打包后的文件名稱
  }
}

(2). 運行指令【npm run build】，則會在build文件夾下生成一個 bundle.js文件，進行調用即可。

PS： webpack.config.js這么默認文件名也可以改，但需要修改下面代碼（不建議改！！）

三. 常用loader

1. 什么是loader？

[常用loader詳見官方文檔：https://webpack.docschina.org/loaders/]

(1). webpack在處理應用程序時，它會根據命令或者配置文件找到入口文件；

　　從入口開始，會生成一個依賴關系圖，這個依賴關系圖會包含應用程序中所需的所有模塊（比如.js文件、css文件、圖片、字體等）；

　　然后遍歷圖結構，打包一個個模塊（根據文件的不同使用不同的loader來解析）；

(2). loader 可以用於對模塊的源代碼進行轉換；在加載這個模塊時，webpack其實並不知道如何對其進行加載，我們必須制定對應的loader來完成這個功能；

　　比如：對於加載css文件來說，我們需要一個可以讀取css文件的loader；這個loader最常用的是css-loader；

2. loader的配置方式

3. css-loader 和 style-loader

(1). 作用

　　css-loader用於加載解析css文件，並不會將解析之后的css插入到頁面中，

　　style-loader用於將css插入<style>標簽的操作，所以這兩個loader通常是一塊使用。

(2). 實戰配置

A. 准備代碼

style.css樣式文件

.title{
    font-size: 20px;
    background-color: antiquewhite;
    font-weight: bold;
    color: blue;
}

ceateHtml.js 文件

import "../css/style.css";

const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "Hello，ypf";

document.body.appendChild(divEl);

createHtml.js文件需要導入到入口文件main.js中。

B. 安裝兩個loader

【npm install css-loader -D】

【npm install style-loader -D】

C. 進行配置，webpack.config.js文件如下

// 這里必須通過 commonjs的寫法配置，不能寫 ES6的寫法
const path = require('path');

module.exports = {
    entry: "./src/main.js", //入口文件
    output: {
        path: path.resolve(__dirname, "./build"), //打包后存放路徑, 必須寫絕對路徑
        filename: "bundle.js" //打包后的文件名稱
    },
    module: {
        rules: [{
            test: /\.css$/, //（表示所有的css結尾的文件都進行匹配）
            use: [
                // 此處的執行順序是由下往上（下面寫法是簡化寫法）
                "style-loader",
                "css-loader"
            ]
        }]
    }
}

也可以完整寫法：

module: {
        rules: [{
            test: /\.css$/, //（表示所有的css結尾的文件都進行匹配）
            use: [
                // 完整寫法，執行順序是由下往上
                { loader: "style-loader" },
                { loader: "css-loader" }
            ]
        }]
    }

D. 打包並測試

運行指令【npm run build】，運行結果如下：

4. less-loader

(1). 作用

　　將less文件轉換成css文件，通常需要配合css-loader、style-loader一起使用

(2). 實戰配置

A. 准備代碼

title.less

@textDecoration: underline;

.title {
  text-decoration: @textDecoration;
}

需要將title.less導入對應的js文件中

B. 安裝loader

【npm install less -D】

【npm install less-loader -D】

注：less-loader依賴less，所有需要先安裝less。

C. 進行配置 webpack.config.js，代碼如下：

module: {
        rules: [{
                test: /\.css$/, //（表示所有的css結尾的文件都進行匹配）
                use: [
                    // 完整寫法，執行順序是由下往上
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
           { test: /\.less$/, //（表示所有的less結尾的文件都進行匹配） use: [ // 簡化寫法，執行順序是由下往上 "style-loader", "css-loader", "less-loader" ] }
        ]
    }

D. 打包測試

【npm run build】

補充：上面的less組件可以直接把less文件轉換成css文件，指令如下：

【npx lessc ./src/css/title.less title.css】

5. postcss-loader 和插件autoprefixer

(1). 作用

　　postcss-loader：我們進行一些CSS的轉換和適配，比如自動添加瀏覽器前綴、css樣式的重置

　　autoprefixer：用於添加前綴

(2). 實戰　　

A. 安裝loader

【npm install postcss postcss-cli -D】

【npm install autoprefixer -D】

【npm install postcss-loader -D】

B. 進行配置

    module: {
        rules: [
            {
                test: /\.css$/, //（表示所有的css結尾的文件都進行匹配）
                use: [
                    "style-loader",
                    "css-loader",
                    { loader: "postcss-loader", options: { postcssOptions: { plugins: [ require("autoprefixer") ] } } }
                ]
            }
        ]
    },

C. 打包測試

【npm run build】

6. 補充：命令行使用postcss 和 postcss-preset-env

【npm install postcss postcss-cli -D】

【npm install autoprefixer -D】

【npx postcss --use autoprefixer -o end.css ./src/css/style.css】

【npm install postcss-preset-env -D】

postcss-preset-env：postcss-preset-env也是一個postcss的插件；幫助我們將一些現代的CSS特性，轉成大多數瀏覽器認識的CSS，並且會根據目標瀏覽器或者運行時環境添加所需的polyfill，也包括會自動幫助我們添加autoprefixer（所以相當於已經內置了autoprefixer）；

作者 : Yaopengfei(姚鵬飛)
博客地址 : http://www.cnblogs.com/yaopengfei/
聲明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
聲明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【webpack】webpack之postcss-loader的基本使用---【巷子】第一節：docker簡介、下載和配置鏡像加速器、以及鏡像和容器的使用第一節 PyQt5簡介第一節：webpack打包、壓縮及兼容性處理第一節Unity3D簡介 Linux第一節Centos系統的安裝第一節 anaconda+jupyter+numpy簡單使用 webpack結合postcss-loader實現css樣式瀏覽器兼容前綴的添加第一節：走進MVC的世界 webpack通過postcss-loader添加瀏覽器前綴