webpack使用教程

1.webpack安裝

webpack依賴于node環境，所有安裝webpack前先安裝node環境。如果你用過baota那么安裝node基本是一鍵化的了。沒使用過baota也沒關系，下面有安裝教程。

安裝node，node官網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環境變量

vim .bash_profile

添加路徑

#往 .bash_profile 新增環境變量(解壓到哪就寫哪路徑) 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 #這個是安裝node.js時自帶的，一個包管理工具 npn -v

3.安裝webpack

全局安裝

npm install webpack webpack-cli –g

本地安裝

npm install webpack webpack-cli --save-dev

2.webpack打包js模塊

1.直接打包方式

如果你直接打包的話，就運行以下命令，runoob1.js為要打包的文件，webpack會根據其依賴的關系，將其需要導入js文件進行整合，然后同一打包到bundle.js里面。（這個方式不常用）因為在真實的開發中，往往不會這樣一個一個得打包。

webpack runoob1.js bundle.js

2.通過配置，利用npm運行腳本打包

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

npm init -y

如果要package還有其他依賴，可以通過以下命令生成package-lock.json，因為我們需要用到webpack打包，所以在npm script中一些命令需要一些相對應的依賴環境。

npm install webpack webpack-cli --save-dev

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

{"name": "myweb","version": "1.0.0","description": "","main": "index.js","dependencies": {},//通過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" }

然后在工程中創建一個配置文件夾config

mkdir config mkdir dist#現在的目錄結構myweb|- package.json|- package-lock.json|- index.html + |- /src|- js|- index.js + |- /dist + |- /node_modules + |- /config|- webpack.config.js

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

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

最后一步打包，這里使用了npm script來進行webpack的打包，最后會在dist目錄下生成bundle.js

npm run build

這里的命令等價于運行了：

webpack --config config/webpack.config.js

3.webpack打包CSS

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

index.js

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

1.安裝css-loader

這時候就要打包CSS，要打包CSS就需要安裝css-loader，webpack 可以使用 loader 來預處理文件。這允許你打包除 JavaScript 之外的任何靜態資源。你可以使用 Node.js 來很簡單地編寫自己的 loader。

npm install --save-dev css-loader

除了css-loader以外還需安裝style-loader，這個功能是：Adds CSS to the DOM by injecting a tag（CSS注入到DOM），因為最終CSS要渲染DOM的，所以需要style-loader。如果沒有安裝會報這個錯誤：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'); //調用node.js中的路徑 module.exports={entry:'./src/js/index.js', //需要打包的文件output:{filename:'bundle.js', //打包文件名path:path.resolve(__dirname,'../dist') //指定生成的文件目錄},//這個是添加的module，用來匹配.css文件module: {rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}]} }

4.webpack打包其他文件

1.思路

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

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

2.相關網址

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

總結

以上是生活随笔為你收集整理的webpack使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。