Webpack入門到精通（1）

SunZhaopeng 發(fā)布于2019-05-23 17:29 / 895人閱讀

前言

什么是webpack 本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉(zhuǎn)換文件優(yōu)化代碼分割模塊合并自動刷新代碼校驗(yàn) 自動發(fā)布) 首先學(xué)習(xí)webpack 需要有簡單的node 基礎(chǔ) ，打開node 官方網(wǎng)站進(jìn)行安裝node, nodejs.cn/ 下載最新版node包并進(jìn)行安裝。

學(xué)習(xí)目標(biāo)：

webpack 常見配置 webpack高級配置

webpack優(yōu)化策略

AST抽象語法樹

webpack中的Tapable

掌握webpack流程手寫 webpack

手寫webpack中常見的loader

手寫webpack 中常見的plugin

定義好學(xué)習(xí)目標(biāo)讓我們開啟webpack 的新旅程。（本文學(xué)習(xí)主要針對webpack4.0 進(jìn)行學(xué)習(xí)講解）

webpck--->基礎(chǔ)搭建與使用：

安裝完畢在終端快速創(chuàng)建node項(xiàng)目執(zhí)行命令npm init -y 生成packge.json
在當(dāng)前目錄安裝本地webpack 終端執(zhí)行命令： npm i webpack webpack-cli -d i表示install ,d表示當(dāng)前是開發(fā)環(huán)境安裝完成會產(chǎn)生node_modules文件 webpack 可以進(jìn)行0配置并且webpack是打包工具(默認(rèn)是js模塊通過入口進(jìn)行打包輸出打包后js結(jié)果)。
創(chuàng)建src目錄 --> 創(chuàng)建index.js -> 輸出:console.log("hello webpack");
npx 語法進(jìn)行把index.js 進(jìn)行打包
終端執(zhí)行命令： npx webpack 我們發(fā)現(xiàn)當(dāng)前目錄生成了一個dist 目錄并且創(chuàng)建了一個main.js(如圖:)

執(zhí)行順序:(默認(rèn)找node_modules--->bin文件 --> webpack文件 )

這里我們明白了安裝webpack 必須安裝他的依賴 webpack-cli webpack打包默認(rèn)支持js模塊化 ->類似于common.js

webpack:兩種默兩種模式如果沒有創(chuàng)建webpack.config.js 配置文件指定mode (production/development)生成模式或開發(fā)模式，打包運(yùn)行會直接默認(rèn)生產(chǎn)模式打包并且進(jìn)行壓縮。
這里說一下webpack配置文件的默認(rèn)名稱有兩種（webpack.config.js / webpackfile.js 一般情況下我們會選擇前一種）

如何手動配置webpack呢？其實(shí)比較簡單

(1)創(chuàng)建webpack.config.js 配置文件由于webpack是node.js的框架所以配置文件中要采用node語法來進(jìn)行編輯。

const path = require("path"); //webpack內(nèi)部方法path組件
module.exports = {
  mode: "development", //打包模式 development開發(fā)模式
  entry: "./src/index.js", //入口文件指定
  output: {
    //出口文件配置 配置出口打包路徑
    filename: "build.js", //打包后的文件名稱
    path: path.resolve(__dirname, "build") //resolve絕對路徑引入
  }
};

我們分析一下build.js 打包出的結(jié)果,默認(rèn)下是一個匿名函數(shù) 并且接收兩個參數(shù) 接收一個對象,Key : value (key:是當(dāng)前模塊的路徑 value：是一個執(zhí)行函數(shù))

接收到modules 里先定義一個緩存對象 installedModules先定一個緩存目的是如果我當(dāng)前模塊加載完成沒有必要再進(jìn)行加載
webpack_require 實(shí)現(xiàn)了一個require方法因?yàn)闉g覽器無法直接執(zhí)行node的require方法 (詳解如圖)

執(zhí)行__webpack_require__ 發(fā)現(xiàn)接收了一個入口模塊

終端運(yùn)行： npx webpack , 發(fā)現(xiàn)我們打包當(dāng)前目錄產(chǎn)生了文件夾build目錄
分析了一下打包文件是不是感覺webpack 源碼沒有想象的那么難繼續(xù)我們webpack 的探索之旅。
如何更改webpack 配置文件名稱呢其實(shí)很簡單重命名webpack.config.js (webpack.test.js)
執(zhí)行命令: npx webpack --config webpack.test.js 發(fā)現(xiàn)可以執(zhí)行webpack打包。
這樣打包我發(fā)現(xiàn)命令很長所以我們利用packge.json 來配置打包腳本在scripts-->添加build.

"scripts": {
 "test": "echo "Error: no test specified" && exit 1",
 "build": "webpack --config webpack.config.js"
}
```
終端運(yùn)行 npm run build  發(fā)現(xiàn)執(zhí)行打包結(jié)果一樣.   
(2)webpack 其他配 -->置插件的使用不會生成文件會生成內(nèi)存中的打包  
安裝webpck內(nèi)置服務(wù) webpack-dev-server 好處是 
終端執(zhí)行命令: npm i webpack-dev-server -d -save
安裝完成可以執(zhí)行 npx webpack-dev-server 按提示打開http://localhost:8080/ 
如何配置開發(fā)服務(wù)運(yùn)行目錄可以在配置文件中添加在webpack.config.js添加devServer
````JavaScript
const path = require("path");
module.exports = {
mode: "development", //打包模式
entry: "./src/index.js", //入口文件指定
output: {
 //出口文件配置 配置出口打包路徑
 filename: "build.js", //打包的文件名稱
 path: path.resolve(__dirname, "build") //resolve絕對路徑引入
},
devServer: {
 //開發(fā)服務(wù)器配置
 contentBase: "./build", //指向打包目錄
 port: 3000, //服務(wù)端口號
 progress: true, //打包進(jìn)度
 open: true, //是否打開瀏覽器
 compress: false //是否壓縮
}
};

在packge.json中添加start 啟動服務(wù)腳本

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js",
    "start":"webpack-dev-server"
  }

運(yùn)行 npm run start 發(fā)現(xiàn)沒有自動創(chuàng)建index.html 不能直觀看到我們代碼在瀏覽器的執(zhí)行。在src目錄下創(chuàng)建html模板 index.html 并安裝 html-webpack-plugin 插件
終端運(yùn)行: npm i -d html-webpack-plugin
在webpack.config.js 下添加插件配置plugins

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development", //打包模式
  entry: "./src/index.js", //入口文件指定
  output: {
    //出口文件配置 配置出口打包路徑
    filename: "build[hash:8].js", //打包的文件名稱 filename: "build[hash:8] 添加哈希值
    path: path.resolve(__dirname, "build") //resolve絕對路徑引入
  },
  devServer: {
    //開發(fā)服務(wù)器配置
    contentBase: "./build", //指向打包目錄
    port: 3000, //服務(wù)端口號
    progress: true, //打包進(jìn)度
    open: true, //是否打開瀏覽器
    compress: false //是否壓縮
  },
  //插件
  plugins: [
    //數(shù)組形式 存放所有的webpack插件
    new HtmlWebPackPlugin({
      filename: "index.html", //生成打包文件名
      template: "./src/index.html", //模板路徑
      minify: { //生產(chǎn)模式可以進(jìn)行配置
        removeAttributeQuotes: true, //刪除 html文件雙引號
        collapseWhitespace: true //折疊控行
      },
      hash:true, //添加哈希值
    })
  ]
};

終端執(zhí)行打包測試：npm run build (build目錄下生成了我們想要生成的index.html文件)

樣式的配置 webpack配置css模塊:

配置樣式需要一個合適loader,loader會將我們的樣式文件解析成模塊(module)
終端：npm i -d --save css-loader style-loader
如何使用樣式loader進(jìn)行配置呢？我們先在src下建index.css并給body賦予簡單樣式在webpack.config.js 進(jìn)行簡單配置
css-loader主要解析我們樣式中@import語法,style-loader是吧css樣式插入head標(biāo)簽中.

+ module: {
    //添加模塊模塊是對象
    rules: [
      //規(guī)則 css-loader主要解析我們樣式中@import語法
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"] //執(zhí)行順序是重右向左執(zhí)行 - >重下到上
      }
    ]
  }

在index.js中引入樣式文件 import "./index.css"
終端運(yùn)行:npm run start 樣式生效了同樣我們也有對應(yīng)的less less-loader
終端：npm i -d --save less less-loader 在這里說一下loader 的另一種寫法對象寫法可以給loader添加一些屬性options

+ module: {
    //添加模塊模塊是對象
    rules: [
      //規(guī)則 css-loader主要解析我們樣式中@import語法
      {
        test: /.css$/,
        use: [ 
           {
            loader: "style-loader",
            options: {
              insertAt: "top" //把標(biāo)簽插入頂部
            }
          }, 
          "css-loader"
          ] //執(zhí)行順序是重右向左執(zhí)行 - >重下到上
      },
      {
        test: /.less$/,
        use: [
            {
            loader: "style-loader",
            options: {
              insertAt: "top" //把標(biāo)簽插入頂部
            }
          }, 
          "css-loader",
          "less-loader"
        ] //執(zhí)行順序是重右向左執(zhí)行 - >重下到上
      }
    ]
  }

css 樣式的抽離安裝抽離插件 mini-css-extract-plugin npm i -d --save mini-css-extract-plugin
引入插件并在配置文件中進(jìn)行配置

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MinCssExtractPlugin = require("mini-css-extract-plugin"); //抽離css插件
module.exports = {
 mode: "development", //打包模式
 entry: "./src/index.js", //入口文件指定
 output: {
   //出口文件配置 配置出口打包路徑
   filename: "[name][hash:8].js", //打包的文件名稱 filename: "build[hash:8] 添加哈希值
   path: path.resolve(__dirname, "build") //resolve絕對路徑引入
 },
 devServer: {
   //開發(fā)服務(wù)器配置
   contentBase: "./build", //指向打包目錄
   port: 3000, //服務(wù)端口號
   progress: true, //打包進(jìn)度
   open: true, //是否打開瀏覽器
   compress: false //是否壓縮
 },
 //插件
 plugins: [
   //數(shù)組形式 存放所有的webpack插件
   new HtmlWebPackPlugin({
     filename: "index.html", //生成打包文件名
     template: "./src/index.html", //模板路徑
     minify: {
       removeAttributeQuotes: true, //刪除 html文件雙引號
       collapseWhitespace: true //折疊控行
     },
     hash: true //添加哈希值
   }),
   new MinCssExtractPlugin({
     filename: "mian.css"
   })
 ],
 module: {
   //添加模塊模塊是對象
   rules: [
     //規(guī)則 css-loader主要解析我們樣式中@import語法
     {
       test: /.css$/,
       use: [
         MinCssExtractPlugin.loader, //創(chuàng)建link標(biāo)簽放入到main.css里
         "css-loader"
       ] //執(zhí)行順序是重右向左執(zhí)行 - >重下到上
     },
     {
       test: /.less$/,
       use: [
         MinCssExtractPlugin.loader, //創(chuàng)建link標(biāo)簽放入到main.css里
         "css-loader",
         "less-loader"
       ] //執(zhí)行順序是重右向左執(zhí)行 - >重下到上
     }
   ]
 }
}

添加樣式前綴 postcss-loader autoprefixer
npm i postcss-loader autoprefixer -d

 module: {
    //添加模塊模塊是對象
    rules: [
      //規(guī)則 css-loader主要解析我們樣式中@import語法
      {
        test: /.css$/,
        use: [
          MinCssExtractPlugin.loader, //創(chuàng)建link標(biāo)簽放入到main.css里
          "css-loader",
          "postcss-loader"
        ] //執(zhí)行順序是重右向左執(zhí)行 - >重下到上
      },
      {
        test: /.less$/,
        use: [
          MinCssExtractPlugin.loader, //創(chuàng)建link標(biāo)簽放入到main.css里
          "css-loader",
           "postcss-loader",
          "less-loader" 
        ] //執(zhí)行順序是重右向左執(zhí)行 - >重下到上
      }
    ]
 }

注意 postcss-loader 需要添加一個配置文件否則不會生效更目錄創(chuàng)建postcss.config.js

module.exports = {
  plugins: [require("autoprefixer")]
};

但是我們發(fā)現(xiàn)問題使用mini-css-extract-plugin插件導(dǎo)致我們css不會被壓縮。
npm 官網(wǎng)有給出To minify the output, use a plugin like optimize-css-assets-webpack-plugin. Setting optimization.minimizer overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:參考鏈接

要使用optimize-css-assets-webpack-plugin 插件接下來我們安裝配置一下.
npm i -d optimize-css-assets-webpack-plugin

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //壓縮js
//配置文件中添加優(yōu)化項(xiàng)
optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})]
  }

使用optimize-css-assets-webpack-plugin我們發(fā)現(xiàn)js右不會被壓縮所以要使用uglifyjs-webpack-plugin --save-dev $ npm install uglifyjs-webpack-plugin --save-dev 配置產(chǎn)考鏈接

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //壓縮js
//配置文件中添加優(yōu)化項(xiàng)
optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({}),new UglifyJsPlugin()]
  }

語法的轉(zhuǎn)換 babel

在index.js 里寫點(diǎn)es6語法箭頭函數(shù)

let fn = () => {
  console.log("es6 webpack");
};
fn();

終端執(zhí)行: npx webpack 查看打包文件

--我們發(fā)現(xiàn)打包出來的仍然是es6語法這個時候我們需要一個loader 進(jìn)行轉(zhuǎn)換 babel-loader babel @babel/core (babel/core是@babel-loader的核心組件轉(zhuǎn)化模塊@babel/preset-env) 參考鏈接終端運(yùn)行:npm i -d babel-loader babel @babel/core @babel/preset-env 在module添加配置

 //在rules下添加配置
 {
        test: /.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              //轉(zhuǎn)化es5語法--presets預(yù)設(shè)
              presets: ["@babel/preset-env"]
            }
          }
        ]
      },

終端運(yùn)行:npm run build

發(fā)現(xiàn)可以已經(jīng)轉(zhuǎn)換es6語法但是僅僅這樣不能轉(zhuǎn)換es6高階語法比如一些特殊的類函數(shù)

class Test {
  // new Test() a =1 實(shí)例上添加a屬性 這個語法屬于es7語法打包時發(fā)現(xiàn)并不能解析
  a = 1;
}

終端運(yùn)行:npm run build 發(fā)現(xiàn)報(bào)錯提示安裝 @babel/plugin-proposal-class-properties

那我們按照要求按照一下插件 npm i -d @babel/plugin-proposal-class-properties 并進(jìn)行一次配置

 //在rules下添加配置
 {
        test: /.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              //轉(zhuǎn)化es5語法--presets預(yù)設(shè)
              presets: ["@babel/preset-env"],
               plugins: ["@babel/plugin-proposal-class-properties"]
            }
          }
        ]
      },

還有一種寫法裝飾器@Log打包也是不被解析的在js 添加

按照錯誤提示安裝decorators-legacy 參考鏈接安裝官方給出配置添加

 //在rules下添加配置
 {
        test: /.js$/,
        use: {
          {
            loader: "babel-loader",
            options: {
              //轉(zhuǎn)化es5語法--presets預(yù)設(shè)
              presets: ["@babel/preset-env"],
               plugins: [ //這里要注意添加順序
                 ["@babel/plugin-proposal-decorators", { legacy: true }],
                ["@babel/plugin-proposal-class-properties", { loose: true }]]
            }
          }
    
      },

轉(zhuǎn)化完語法接下來看一下babel語法的校驗(yàn) @babel/plugin-transform-runtime @babel/runtime參考鏈接

  {
        test: /.js$/,
        use: {
          loader: "babel-loader",
          options: {
            //轉(zhuǎn)化es5語法--presets預(yù)設(shè)
            presets: ["@babel/preset-env"],
            plugins: [
              ["@babel/plugin-proposal-decorators", { legacy: true }],
              ["@babel/plugin-proposal-class-properties", { loose: true }],
              [
                "@babel/plugin-transform-runtime",
                {
                  absoluteRuntime: false,
                  corejs: false,
                  helpers: true,
                  regenerator: true,
                  useESModules: false
                }
              ]
            ]
          }
        },
        include: path.resolve(__dirname, "src"), //只找__dirname - >src
        exclude: /node_modules/ //忽略node_modulse
      },

includes 實(shí)例方法不被解析需要一個補(bǔ)丁模塊@babel/polyfill
npm install --save @babel/polyfill Babel includes a polyfill that includes a custom regenerator runtime and core-js. 使用可以直接在js 里引入即可。
接下來看一下代碼校驗(yàn)ESLint代碼校驗(yàn)工具參考鏈接終端安裝 npm i -d eslint eslint-loader 根據(jù)項(xiàng)目需求下載對應(yīng)的eslintrc.json 下載鏈接

 //代碼校驗(yàn)eslint
      {
        test: /.js$/,
        use: {
          loader: "eslint-loader",
          options: {
            enforce: "pre" //強(qiáng)制執(zhí)行順序
          }
        }
      },

DEMO

本文回顧 1、webpack基本功能 build.js 打包的原理及源碼分析 2、webpack基礎(chǔ)配置及常用插件配置安裝 3、loader的使用與配置樣式的處理 4、webpack優(yōu)化項(xiàng)的簡單使用 5、babel語法轉(zhuǎn)換與使用 babel語法校驗(yàn) . 完成以上我相信大家可以掌握并搭建簡單webpack項(xiàng)目。

第二章我們將講解webpack 其他組件的配置及webpack優(yōu)化項(xiàng) webpack圖片處理多入口應(yīng)用）

云服務(wù)器 GPU云服務(wù)器精通android入門到精通前端入門到精通 webrtc入門到精通物聯(lián)網(wǎng)入門到精通

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/7312.html

發(fā)表評論

登陸后可評論

0條評論

SunZhaopeng

男|高級講師

我要關(guān)注我要私信

TA的文章

如何訪問自己的主機(jī)名-怎么查看自己電腦的主機(jī)名？

閱讀 2517·2021-09-22 15:41
MoeCloud：79.2元/月/1GB內(nèi)存/10GB SSD空間/2TB流量/10Gbps端口/K

閱讀 1481·2021-08-19 10:54
手挽手帶你學(xué)React：三檔 React-router4.x的使用

閱讀 1796·2019-08-23 15:11
有關(guān)getter 和 setter的使用

閱讀 3425·2019-08-23 10:23
你應(yīng)該知道的requestIdleCallback

閱讀 1458·2019-08-22 16:28
在Shadow DOM使用原生模板

閱讀 819·2019-08-22 15:11
checkbox jquery 全選反選

閱讀 764·2019-08-22 14:53
lodash源碼分析之List緩存

閱讀 739·2019-08-22 13:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Webpack入門到精通（1）

如何手動配置webpack呢？其實(shí)比較簡單

樣式的配置 webpack配置css模塊:

相關(guān)文章

Webpack 4.X 從入門到精通 - devServer與mode（三）

Webpack 4.X 從入門到精通 - loader（五）

Webpack 4.X 從入門到精通 - module（四）

Webpack 4.X 從入門到精通 - 第三方庫（六）