2020-3-7-webpack打包工具

SylvesterZhang發表於2024-03-22
Web

概述、快速使用、配置檔案、webpack-dev-server、babel使用

概述

為最佳化頁面傳送多次的二次請求導致載入速度變慢和處理錯綜複雜的檔案依賴關係，則需要將專案中涉及的多個檔案進行合併並重新構建。wepack是一個基於node.js專案構建工具，其構建方式是基於專案構建。

安裝

npm i webpack -g

npm i webpack-cli -d

npm install --save-dev webpack

快速使用

1專案中建立main.js

import $ from 'jquery'//先安裝jQuery，命令npm i jueqry --save
$(function(){
	//程式碼
})

2執行命令

低版本

webpack ./src/main.js ./dist/bundle.js

高版本

webpack ./src/main.js -o ./dist/bundle.js

./src/main.js是要打包的js檔案路徑，./dist/bundle.js是輸出路徑，webpack能處理js檔案相互關係並處理相容問題

配置檔案

在專案的更目錄下建立一個名為webpack.config.js的檔案

//webpack.config.js
const path=require('path')
module.exports={
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	}
}

直接執行webpack便可進行構建

webpack-dev-server

1安裝

npm i webpack-dev-server -d

2package.json檔案中配置

{
  "name": "webpack_file",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"//新增
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}

'webpack-dev-server --open --port 3000 --contentBase src --hot'裡，open是指執行後開啟瀏覽器，port設定埠號，contentBase設定根目錄，hot設定熱更新

注意，json檔案中不可以寫註釋，這裡的註釋僅僅是為了方便理解，實際專案中應去除

另一種配置方法則為修改webpack.config.js

//webpack.config.js
const path=require('path')
const webpack=require('webpack')
module.exports={
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	},
    devServer:{
        open:true,
        port:3000,
        contentBase:'src',
        hot:true
    }
    plugins:[
    	new webpack.HotModuleReplacementPlugin()
    ]
}

這種配置方法不推薦

3執行命令啟動服務

npm run dev

注意webpack-dev-server會幫我們生成bundle.js檔案，透過http://localhost:3000/bundle.js可訪問，此時檔案存在於記憶體中，未放置在物理磁碟裡

4記憶體中的bundle.js自動注入html頁面中

1）安裝

npm i html-webpack-plugin -d

2）webpack.config.js檔案中進行配置

const path=require('path')
const htmlwebpackplugin=require('html-webpack-plugin')//匯入
module.exports={
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
    },
    plugins:[
        new htmlwebpackplugin({
            template:path.join(__dirname,'./src/index.html'),//源頁面
            filename:'index.html'//記憶體中的頁面，將會把bundle.js注入該頁面中
        })
    ]
}

5引入樣式檔案css、less、sass檔案

1）安裝

npm i style-loader css-loader -d

npm i less -d
npm i less-loader

npm i node-scss -d
npm i sass-loader -d

2）修改webpack.config.js檔案

const path=require('path')
const htmlwebpackplugin=require('html-webpack-plugin')
module.exports={
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
    },
    plugins:[
        new htmlwebpackplugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module:{//新增
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use：['style-loader','css-loader','less-loader']},
    		{test:/\.scss$/,use：['style-loader','css-loader','sass-loader']}
        ]
    }
}

3）main.js中匯入樣式檔案（以css檔案為例）

import $ from 'jquery'
import './css/index.css'//注意：根目錄更改為src，所有這裡直接使用地址'./css/index.css'
$(function(){
    alert(123)
})

6樣式檔案中引入圖片

1）安裝

npm i url-loader file-loader -d

2）修改webpack.config.js檔案

const path=require('path')
const htmlwebpackplugin=require('html-webpack-plugin')
module.exports={
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
    },
    plugins:[
        new htmlwebpackplugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
    		{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'}//新增
			//這裡的url-loader可跟引數，如url-loader?limit=7617&name=[hash:8]-[name]-[ext]
			//圖片預設會以base64輸出，透過limit設定限制，小於這個大小則用預設方式，大於則原樣輸出
        ]
    }
}

3）css檔案中引入圖片

#main{
    background-image: url(../imgs/123.jpg);
}

4）處理字型檔案

匯入bootstrap會有字型檔案需要匯入，只需在webpack.config.js檔案中module.rules中新增{test:/\.(ttf|eot|svg|woff|woffz)$/,use:'url-loader'}

這樣配置後我們就可以在main.js中直接匯入bootstrap

import 'bootstrap/dist/css/bootstrap.css'

babel使用

由於webpack只可處理部分ES6語法，有的語法並不支援如類的靜態屬性，需要藉助外部外掛完成對js新語法的支援

1安裝

npm i babel-core babel-loader babel-plugin-transform-runtime -d

npm i babel-preset-env babel-preset-stage-0 -d

2修改webpack.config.js檔案

const path=require('path')
const htmlwebpackplugin=require('html-webpack-plugin')
module.exports={
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
    },
    plugins:[
        new htmlwebpackplugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use['style-loader','css-loader','less-loader']},
    		{test:/\.scss$/,use['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'},
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}//新增
			//這裡要排除掉node_modules的js檔案，防止執行速度變慢已及專案無法正常執行
        ]
    }
}

3根目錄下新建配置檔案.babelrc

{
	"presets":["env","stage-0"],
	"plugins":["transform-runtime"]
}

注意：嚴格按照json語法，不能寫註釋，字串要用雙引號

3異常處理

執行過程總報錯

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\admin\Desktop\vue\webpack_vue\node_modules\babel-preset-stage-0\lib\index.js
    at createDescriptor (C:\Users\admin\Desktop\vue\webpack_vue\node_modules\@babel\core\lib\config\config-descriptors.js:178:11)
    at C:\Users\admin\Desktop\vue\webpack_vue\node_modules\@babel\core\lib\config\config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (C:\Users\admin\Desktop\vue\webpack_vue\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\Users\admin\Desktop\vue\webpack_vue\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (C:\Users\admin\Desktop\vue\webpack_vue\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
    at mergeChainOpts (C:\Users\admin\Desktop\vue\webpack_vue\node_modules\@babel\core\lib\config\config-chain.js:320:26)
    at C:\Users\admin\Desktop\vue\webpack_vue\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at Generator.next (<anonymous>)
    at buildRootChain (C:\Users\admin\Desktop\vue\webpack_vue\node_modules\@babel\core\lib\config\config-chain.js:120:29)

做如下處理

npm uninstall babel-loader
npm install babel-loader@7.1.5

相關文章