Webpack的基本使用

Webpack的基本使用

📘一、什么是Webpack

Webpack是一個靜態的模塊打包工具,當webpack處理應用程式時，會將所有這些模塊打包成一個或多個檔案
webpack提供了友好的模塊化支持以及代碼壓碩訓淆、處理JS兼容問題、性能優化等強大的功能，提高開發效率和專案的可維護性

靜態：開發的程序中，存在于本地的js/css/圖片圖示字體檔案等，就是靜態的
動態的內容，webpack沒辦法處理只能處理靜態的

📘二、Webpack安裝

首先初始化專案

npm init -y

全域安裝webpack

npm install -g webpack webpack-cli

查看版本

webpack -v

📘 三、組態檔：webpack.config.js

在webpack.config.js組態檔中，初始化如下的配置：

• development模式不會進行代碼的壓縮與混淆，在開發期間都用development模式，可以提高編譯的速度，
• production模式會減少打包檔案的體積，上線階段使用production模式

📘 四、在package.json組態檔中的scripts節點下，新增dev腳本如下：

📘 五、在終端中運行npm run dev命令，啟動 webpack進行專案的打包，打包后會出現dist檔案，

📘 六、Webpack 的四個基本的概念

（ 一）、 入口(entry)

入口起點(entry point) 指示 webpack 應該使用哪個模塊，來作為構建其內部 依賴圖(dependency graph) 的開始，進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的，

   //單入口檔案寫法
    // entry: './Webpack/src/index.js',
    //多入口檔案寫法
    entry: {
        main: './webpack/src/index.js',
        search: './webpack/src/search.js'
    },

（二）、輸出(output)

output 屬性告訴 webpack 在哪里輸出它所創建的 bundle，以及如何命名這些檔案，主要輸出檔案的默認值是 ./dist/main.js，其他生成檔案默認放置在 ./dist 檔案夾中，

 //__dirname目錄名  
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'bundle.js',
        //多個出口
        filename: '[name].js'
    },

const path = require('path');

module.exports = {
    mode: 'development',
    //單入口檔案
    // entry: './Webpack/src/index.js',
    //多入口檔案
    entry: {
        main: './webpack/src/index.js',
        search: './webpack/src/search.js'
    },
    //__dirname目錄名  
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'bundle.js',
        //多個出口
        filename: '[name].js'
    },
};

（三）、loader

webpack 只能理解 JavaScript 和 JSON 檔案，這是 webpack 開箱可用的自帶能力，loader 讓 webpack 能夠去處理其他型別的檔案，并將它們轉換為有效 模塊，以供應用程式使用，以及被添加到依賴圖中，簡單來說，

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

• test 屬性，識別出哪些檔案會被轉換，
• use 屬性，定義出在進行轉換時，應該使用哪個 loader，

安裝babel-loader步驟

執行以下命令

npm install --save-dev babel-loader@8.1.0 @babel/core@7.11.0 @babel/preset-env@7.11.0

配置Babel

創建一個.babelrc 檔案夾，配置

在webpack.config.js中的module物件的rules屬性添加一項代碼：

 module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    }

安裝core-js

npm install --save-dev core-js@3.6.5

引入core-js

import 'core-js/stable';

打包并測驗

npm run dev

（四）、插件(plugin)

loader 用于轉換某些型別的模塊，而插件則可以用于執行范圍更廣的任務，包括：打包優化，資源管理，注入環境變數，
想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 陣列中，多數插件可以通過選項(option)自定義，
首先我們安裝插件，執行以下命令

npm install --save-dev  html-webpack-plugin@4.3.0

引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); 

配置插件

多頁面配置html-webpack-plugin插件

📗七、處理CSS檔案

安裝css-loader執行以下命令

npm install --save-dev css-loader@4.1.1

📗方法一：通過style的方式引入

安裝 style-loader，執行以下命令

npm install --save-dev style-loader@1.2.1

在webpack.config.js檔案中配置

📗方法二：通過link的形式引入

安裝，執行以下命令

 npm install --save-dev mini-css-extract-plugin@0.9.0

在webpack.config.js檔案中配置

📗 八、使用file-loader處理CSS檔案中的圖片

首先我們要知道：如果圖片是外部資源，是不需要考慮webpack的，只有本地的圖片才被webpack處理
安裝file-loader，執行以下命令：

npm install --save-dev file-loader@6.0.0

file-loader的作用：把圖片從原來的地方粘貼復制到輸出的目錄中，然后更改原始碼的路徑

基本配置如下：

📗 九、使用file-withimg-loader處理CSS檔案中的圖片

安裝file-withimg-loader，執行以下命令

npm install --save-dev html-withimg-loader@0.1.16

配置

📗 十、使用file-loader 處理JS中的圖片

配置與CSS檔案處理圖片一樣
JS引入圖片

📗 十一、使用url-loader處理圖片

安裝url-loader,執行以下命令

npm install --save-dev url-loader@4.1.0

配置圖片的限制大小，輸出的格式為base64編碼

📗 十二、使用webpack搭建開發環境

執行以下命令

npm install --save-dev webpack-dev-server@3.11.0

在webpack.config.js中進行以下配置

 "dev": "webpack-dev-server --open chrome",

運行：npm run dev