webpack使用教程

1.webpack安裝

webpack依賴于node環(huán)境，所有安裝webpack前先安裝node環(huán)境。如果你用過(guò)baota那么安裝node基本是一鍵化的了。沒(méi)使用過(guò)baota也沒(méi)關(guān)系，下面有安裝教程。

安裝node，node官網(wǎng)https://nodejs.org/en/download/

1.先解壓node壓縮包，解壓完刪到壓縮包

tar -xvf node-v14.15.1-linux-x64.tar.xz rm -rf node-v14.15.1-linux-x64.tar.xz

2.配置node環(huán)境變量

vim .bash_profile

添加路徑

#往 .bash_profile 新增環(huán)境變量(解壓到哪就寫哪路徑) export NODE_HOME=/node-v14.15.1-linux-x64 export PATH=$PATH:$NODE_HOME/bin export NODE_PATH=$NODE_HOME/lib/node_modules

最后source一下

source .bash_profile

檢查安裝

node -v #這個(gè)是安裝node.js時(shí)自帶的，一個(gè)包管理工具 npn -v

3.安裝webpack

全局安裝

npm install webpack webpack-cli –g

本地安裝

npm install webpack webpack-cli --save-dev

2.webpack打包js模塊

1.直接打包方式

如果你直接打包的話，就運(yùn)行以下命令，runoob1.js為要打包的文件，webpack會(huì)根據(jù)其依賴的關(guān)系，將其需要導(dǎo)入js文件進(jìn)行整合，然后同一打包到bundle.js里面。（這個(gè)方式不常用）因?yàn)樵谡鎸?shí)的開(kāi)發(fā)中，往往不會(huì)這樣一個(gè)一個(gè)得打包。

webpack runoob1.js bundle.js

2.通過(guò)配置，利用npm運(yùn)行腳本打包

打包前先初始化一些配置文件，輸入以下命令后，將會(huì)在項(xiàng)目目錄中自動(dòng)生成package.json文件。這個(gè)文件將保存npm一些腳本的配置信息。

npm init -y

如果要package還有其他依賴，可以通過(guò)以下命令生成package-lock.json，因?yàn)槲覀冃枰玫絯ebpack打包，所以在npm script中一些命令需要一些相對(duì)應(yīng)的依賴環(huán)境。

npm install webpack webpack-cli --save-dev

這里我生成的package.json文件的信息：

{"name": "myweb","version": "1.0.0","description": "","main": "index.js","dependencies": {},//通過(guò)install安裝了的依賴"devDependencies": {"webpack": "^5.6.0","webpack-cli": "^4.2.0"},//這里就是我們的腳本命令了,其中build是我自己添加的"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config config/webpack.config.js"},"keywords": [],"author": "","license": "ISC" }

然后在工程中創(chuàng)建一個(gè)配置文件夾config

mkdir config mkdir dist#現(xiàn)在的目錄結(jié)構(gòu)myweb|- package.json|- package-lock.json|- index.html + |- /src|- js|- index.js + |- /dist + |- /node_modules + |- /config|- webpack.config.js

在里面添加一個(gè)webpack.config.js文件，這個(gè)文件就是webpack的一些配置信息。這里只是一些基本的配置，如果需要知道更多，可以參考官方的配置信息：https://www.webpackjs.com/configuration/

const path=require('path'); //調(diào)用node.js中的路徑 module.exports={entry:'./src/js/index.js', //需要打包的文件output:{filename:'bundle.js', //打包后生成文件名path:path.resolve(__dirname,'../dist') //指定生成的文件目錄} }

最后一步打包，這里使用了npm script來(lái)進(jìn)行webpack的打包，最后會(huì)在dist目錄下生成bundle.js

npm run build

這里的命令等價(jià)于運(yùn)行了：

webpack --config config/webpack.config.js

3.webpack打包CSS

如果你在你的js文件用引用了一些css文件如：

index.js

//在js中引用了css文件的樣式 import style from './file.css'

1.安裝css-loader

這時(shí)候就要打包CSS，要打包CSS就需要安裝css-loader，webpack 可以使用 loader 來(lái)預(yù)處理文件。這允許你打包除 JavaScript 之外的任何靜態(tài)資源。你可以使用 Node.js 來(lái)很簡(jiǎn)單地編寫自己的 loader。

npm install --save-dev css-loader

除了css-loader以外還需安裝style-loader，這個(gè)功能是：Adds CSS to the DOM by injecting a tag（CSS注入到DOM），因?yàn)樽罱KCSS要渲染DOM的，所以需要style-loader。如果沒(méi)有安裝會(huì)報(bào)這個(gè)錯(cuò)誤：Module not found: Error: Can’t resolve ‘style-loader’ in ‘/XXX/XXX/myweb’

npm install style-loader --save-dev

2.更改webpack.config.js配置信息

在webpack.config.js中的module.exports添加module模塊

const path=require('path'); //調(diào)用node.js中的路徑 module.exports={entry:'./src/js/index.js', //需要打包的文件output:{filename:'bundle.js', //打包文件名path:path.resolve(__dirname,'../dist') //指定生成的文件目錄},//這個(gè)是添加的module，用來(lái)匹配.css文件module: {rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}]} }

4.webpack打包其他文件

1.思路

其他文件的打包思路都是一樣的，注意為以下思路：

• npm install相關(guān)的包
• 更改webpack.config.js配置信息（在module添加相應(yīng)的規(guī)則rules）
• 更改npm script的配置信息（選，如果需要執(zhí)行其他命令才需要更改"scripts"中的信息）
• 通過(guò)npm run +腳本命令

2.相關(guān)網(wǎng)址

去webpackjs中文官網(wǎng)可以查到webpack.config.js配置信息，網(wǎng)址：https://www.webpackjs.com/loaders/，安裝那些包也可以去官網(wǎng)看。

總結(jié)

以上是生活随笔為你收集整理的webpack使用教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。