webpack 入門篇

官網首頁：

 這些資源包括：腳本 / 圖片 / 樣式 / 表 。

 

因此，本質上，webpack 就是一個現代 JavaScript 應用程序的 靜態模塊打包器(module bundler)。

 

用來幹嘛的？

它作的事情是：分析你的項目結構，找到 JavaScript 模塊、圖片、以及其餘的一些瀏覽器不能直接運行的拓展語言（scss/ typescript 等），並將其 轉換 和 打包 爲合適的格式供瀏覽器使用。

 

webpack 具備兩大特色： 模塊化  、  打包

做用：

一、將瀏覽器不能直接運行的擴展語言 轉換 成瀏覽器能識別的文件。

二、將多個文件打包成一個文件  （如：image/styles/assets/scripts 等前端經常使用的文件）

三、搭建開發環境開啓服務器

四、監視文件改動，熱部署

 

爲何？

一、模塊化開發

　　對比Node.js 模塊，webpack 模塊可以以各類方式表達它們的依賴關係：如

• ES2015 import 語句
• CommonJS  require() 語句
• AMD define 和require 語句
• css / sass / less  文件中的 @import 語句
• 樣式（url(...)）或 HTML文件（<img src=...>）中的圖片連接（image url）

二、預處理（Less, Sass, ES6, TypeScript...）

三、主流框架腳手架支持（Vue，React， Angular）

四、龐大的社區（資源豐富，下降學習成本）

總之一句話，方便快捷便於咱們快速的開發。

 

怎麼用？

 

安裝webpack

全局安裝：

npm i webpack -g

再在項目中安裝：

npm i webpack --save-dev

至於webpack全局安裝以後爲什麼還要本地安裝，請看：https://www.jianshu.com/p/4585ec653bfb

此時，package.json 文件中會自動生成對 webpack 的開發依賴：

 

新建一個 js 文件，而後執行命令：

webpack ./src/main.js  ./dist/build.js

就會在根目錄下生成一個 dist 文件夾，裏面會有一個打包以後的 build文件。

可是每次打包都這樣輸入一大串命令很繁瑣，因此須要用到package.json 的腳本功能。修改它以下：

// package.json
{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "webpack 的使用 demo",
    "main": "index.js",
    "author": "xxx",
    "scripts": {
         "build": "webpack ./src/app.js ./dist/build.js"
    },
    "devDependencies": {
        "webpack": "^3.6.0",
    }
}     

此時，若是再想打包，直接運行命令：

npm run build

便可。這樣作的好處是：簡單方便，一些命令都不用記下來，其餘人很容易就知道這個項目要如何進行打包。

 

可是 webpack 還有不少強大的功能很差在簡單命令中實現，這個時候就須要用到 webpack 的配置文件了。

此時，在根目錄下新增一個 webpack.config.js 文件。

而後命令行運行：

webpack

此時webpack會自動檢索根目錄下的webpack.config.js文件，而後根據這個文件中的配置去打包文件。

 

webpack.config.js

從webpack v4.0.0 開始，能夠不用引入一個配置文件。然而，webpack 仍然仍是高度可配置的。在開始前你須要先理解四個核心概念：

• 入口（entry）
• 輸出（output）
• loader
• 插件（plugins）

 

咱們先看一個簡單的配置文件：

// webpack.config.js
module.exports = {
    watch: true, // 監聽
    entry: "./src/main.js", // 入口文件
    output: { // 出口文件
        path: path.resolve(__dirname, 'dist'),  // path: 文件的輸出目錄
        filename: "build.js"  
    }  
}
// __dirname，這個變量咱們沒有賦值，哪裏來的？放的是什麼？
// __dirname其實是webpack在編譯時本身內部加上的一個變量，它表明webpack.config.js這個文件在電腦上的絕對路徑。

module.exports:  爲導出對象，webpack  會直接讀取這個導出對象來打包代碼

entry: 入口。即打包從哪一個文件開始。官方的解說是：指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點(entry point)後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。默認值爲 ./src

output: 出口。即打包後生成的文件配置。output 屬性告訴 webpack 在哪裏輸出它所建立的bundles，以及如何命名這些文件，默認值爲 ./dist。

 

loader

loader 是一種打包方案，讓webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。此時，咱們就須要定義一種規則，告訴 webpack 碰見其餘某種格式的文件後，去求助與相應的loader。

 

loader能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。

 

本質上，webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖（和最終的bundle）能夠直接引用的模塊。

注意，loader 可以 import 導入任何類型的模塊（例如：.css 文件）這是webpack 特有的功能，其餘打包程序或任務執行器可能並不支持。但這種語言擴展是頗有必要的，由於這可使開發人員建立出更準確的依賴關係圖。

 

在更高層面，在webpack的配置中 loader 有兩個目標：

一、 test  屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件

二、 use  屬性， 表示進行轉換時，應該使用哪一個 loader

一個簡單的例子：

// webpack.config.js

const path = require('path')

const config = {
    output: {
        filename: 'build.js'
    },
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }，
　　　　　　  { 第二個 loader }，
            { 第三個 loader }
        ]
    }
};

module.exports = config;

以上配置中，對一個單獨的 module 對象 定義了  rules  屬性，裏面包含了兩個必須屬性： test 和 use。這告訴 webpack 編譯器（compiler）以下信息：

「嘿，webpack 編譯器，當你碰到 [在  require() / import  語句中被解析爲 ‘.txt’ 的路徑]時，在你對它打包以前，先使用  raw-loader  轉換一下。」

 

注意：在 webpack 配置中定義 loader 時，要定義在 module.rules 中，而不是 rules。然而，在定義錯誤時 webpack 會給出嚴重的警告。

 

webpack 經常使用的 loader

1.模板：

　　（1）、html-loader：將 HTML 文件導出編譯爲字符串，可供 js 識別的其中一個模塊

　　（2）、pug-loader：加載 pug 模板

　　（3）、jade-loader：加載jade模板（是 pug 的前身，因爲商標問題更名爲 pug）

　　（4）、ejs-loader： 加載 ejs 模板

　　（5）、handlebars-loader：將 Handlebars 模板轉移爲HTML

2.樣式

　　（1）、css-loader: 解析 css 文件中代碼

　　（2）、stye-loader：將 css 模塊做爲樣式導出到DOM中

　　（3）、less-loader：加載和轉義 less 文件

　　（4）、sass-loader：加載和轉義 sass / scss 文件

　　（5）、postcss-loader: 使用 postcss 加載和轉義 css / sss 文件

3.腳本轉換編譯

　　（1）、script-loader：在全局上下文中執行一次 JavaScript 文件，不須要解析

　　（2）、babel-loader：加載 ES6+ 代碼後使用 Babel 轉義爲 ES5 後，瀏覽器才能解析

　　（3）、typescript-loader: 加載 Typescript 腳本文件

　　（4）、coffee-loader：加載 Coffeescript 腳本文件

4.JSON 加載

　　（1）、json-loader：加載 json 文件（默認包含）

　　（2）、json5-loader：加載和轉義 JSON5 文件

5. Files 文件

　　（1）、raw-loader：加載文件原始內容（utf-8 格式）

　　（2）、url-loader：多數用於加載圖片資源 / 字體圖標 / mp4/mp3，超過文件大小顯示則返回 data URL

　　（3）、file-loader：將文件發送到輸出的文件夾並返回 URL (相對路徑)

　　（4）、jshint-loader：檢查代碼格式錯誤

6.加載框架

　　（1）、vue-loader：加載和轉義 vue 組件

　　（2）、angular2-template-loader：加載和轉義 angular 組件

　　（3）、react-hot-loader：動態刷新和轉義 react 組件中修改的部分，基於 webpack-dev-server插件需先安裝，而後在 webpack.config.js 中引用 react-hot-loader

 

插件（plugins）

loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化到壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

想要使用 一個插件，你只須要  require()  它，而後把它添加到  plugins  數組中。

多數插件能夠經過選項(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過  new  操做符來建立它的一個實例。

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './src/index.html' })
    ]
};

module.exports = config;

 

 模式

經過選擇 development 或 production 之中的一個，來設置 mode 參數，你能夠啓用相應模式下的 webpack 內置的優化

module.exports = {
    mode: 'production'
}

 

 

文章內容部分來源於：

http://www.javashuo.com/article/p-ghclqluw-ce.html

https://baijiahao.baidu.com/s?id=1594972657801970108&wfr=spider&for=pc

https://www.cnblogs.com/hughes5135/p/6891784.html?utm_source=itdadao&utm_medium=referral