webpack介紹及使用-有解無憂

webpack的概念:

webpack是一個現代js應用程式的靜態模塊打包器，

理解webpack的四個核心概念:

入口(entry):webpack以哪個檔案為入口,來作為構建內部依賴圖的開始，
輸出(output)：會創建一個檔案夾,默認值是./dist,告訴webpack在什么地方輸出創建的bundles

1.output.filename //出口檔案名稱

2.output.path //路徑

loader:讓webpack可以處理那些非js的檔案，

1.test:標識要被轉換的檔案

2.use:裝換時,使用哪個loader

插件(plugins):通過require(),然后把它添加到plugins陣列中

一.webpack基本使用,將兩個js檔案打包到一個js中

1.去根目錄創建一個package.json的檔案

yarn init -y  //不可以以中文和空格命名

2.安裝依賴包

yarn add webpack webpack-cli -D

3.去package.json進行配置

"scripts":{
"build":"webpack"  //build這個名字可以自定義
}

4.新建目錄src,注意這里一定要是src,webpack默認找下面的src檔案夾

5.新建src/add/add.js - 定義求和函式匯出

expprt const addFn = (a,b)=>a+b

6.新建src/index.js匯入使用

//按需匯入
import {addFn} from './add/add'
//{}里面的值要和定義按需匯入的值一樣
console.log(10,10)

7.運行打包命令

yarn build

二.webpack配置入口出口

默認入口:./src/index.js

默認出口:./dist/main.js //打包js檔案,輸入yarn build 命令會自動出現dist檔案

1.src同級目錄新建webpack.config.js

2.填入配置項

const path = require("path")

module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路徑
        filename: "bundle.js" // 出口檔案名
    }
}

插件-自動生成html檔案

下載插件

yarn add html-webpack-plugin  -D

webpack.config.js配置

//引入自動生成HTML的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {

//...省略其他代碼
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此為基準生成打包后html檔案
        })
    ]

}

加載器-處理css檔案

1.安裝依賴包

yarn add style-loader css-loader -D

webpack.config.js配置

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

module.exports = {
    // ...其他代碼
    module: { 
        rules: [ // loader的規則
          {
            test: /\.css$/, // 匹配所有的css檔案
            // use陣列里從右向左運行
            // 先用 css-loader 讓webpack能夠識別 css 檔案的內容并打包
            // 再用 style-loader 將樣式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

加載器-處理less檔案

下載依賴包

yarn add less less-loader -D

webpack.config.js配置

module: {
  rules: [ // loader的規則
    // ...省略其他
    {
    	test: /\.less$/,
    	// 使用less-loader, 讓webpack處理less檔案, 內置還會用less翻譯less代碼成css內容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

加載器-處理圖片檔案

直接在webpack.confing.js 的rules就可以

{

test: /\.(png|jpg|gif|jpeg)$/i,
type: 'asset'

}

webpack加載檔案優缺點

圖片轉成base64字串

優點是瀏覽器不用發送請求,直接讀取

缺點是體積增大30%左右

加載器-處理高版本js語法

安裝包

yarn add -D babel-loader @babel/core @babel/preset-env

配置規則

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'] // 預設:轉碼規則(用bable開發環境本來預設的)
            }
        }
    }
  ]
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/321288.html

標籤：其他

上一篇：reduce的使用（完整版）

下一篇：vue中 .sync 和 v-model 的區別