- 創建一個工程目錄，在該目錄下創建dist和src兩個目錄，並在src中創建一個index.js文件(其他目錄隨意)
- 在dos窗口進入該工程目錄，安裝webpack和webpack-cli(需要先安裝npm，nodejs)
- 方法一：全局安裝
npm install -g webpack
npm install -g webpack-cli
- 方法二：在工程目錄中安裝
npm install --save-dev webpack
npm install --save-dev webpack-cli
-
初始化 npm init -y 初始化成功後會出現一個package.json文件
-
下載jQuery npm install jquery -S
-
編寫文件
index.html：
<body>
<ul>
<li>第1個</li>
<li>第2個</li>
<li>第3個</li>
<li>第4個</li>
<li>第5個</li>
</ul>
</body>
index.js
//導入jQuery
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor', 'lightblue')
})
- 打包編譯index.js文件 webpack --mode development
注：使用該默認方法打包js文件，需保證文件名爲index.js且在src目錄下，打包成功後默認生成dist目錄下的main.js文件
- 非默認：
- 在項目根目錄下創建webpack.config.js文件並進行如下配置
const path = require("path")
module.exports = {
entry: {
app:"./index.js"
},
output: {
publicPath:__dirname + "/dist",
path:path.resolve(__dirname, "dist"),
filename:"bundle.js"
}
}
或：
entry:path.join(__dirname, './src/main.js'),
output:{
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
}
- 執行 webpack --mode development
使用webpack-dev-server實現自動打包編譯
-
npm i webpack-dev-server -D(i -D 是 install --save-dev 的簡寫)
注：想要webpack-dev-server能夠正常運行，本地項目必須安裝webpack -
在package.json文件下的dev中添加
-webpack-dev-server
執行npm run dev打包編譯成功但是並未退出打包狀態，在該狀態下若index.js文件被改變，則會自動打包編譯生成新的bundle.js文件
注：使用Ctrl + C退出
**
Webpack處理CSS樣式表
**
- 在項目中安裝 style-loader 和 css-loader
npm i style-loader css-loader -D
- 在webpack.config.js文件的module.exports中新建一個module節點(請看上面的非默認打包的配置)
module: {//用於配置所有第三方模塊加載器
rules:[//第三方模塊加載器的規則
//處理.css文件的第三方loader規則，後面的loader先處理
{test:/\.css$/, use: ['style-loader', 'css-loader']}
]
}
處理less文件
- 安裝less-loader ：
npm i less-loader -D
需要安裝less依賴：npm i less -D - 在webpack.config.js中配置
//處理.less文件的第三方loader規則
{test:/\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
處理scss文件
- 安裝 sass-loader ：
npm i sass-loader -D
需要安裝 node-sass 依賴：npm i node-sass -D(可能用npm安裝不了，需要使用cnpm) - 在webpack.config.js中配置
//處理.scss文件的第三方loader規則
{test:/\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
處理URL(圖片)
- 安裝url-loader(需要依賴file-loader)
npm i url-loader file-loader -D
- 在webpack.config.js中配置
//處理圖片路徑的loader
{test:/\.(jpg|jpeg|png|pneg|gif|bmp)$/, use: 'url-loader'}
處理bootstrap圖標
- 下載boostrap(3.X版)：npm i [email protected] -D
- 在index.js中引入
import 'bootstrap/dist/css/bootstrap.css'
- 在webpack.config.js中配置
//處理字體文件
{test:/\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}
- 在html中調用(官網：https://v3.bootcss.com/components/)
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
4.x版(https://useiconic.com/open)：
- 下載：npm i [email protected] -D
由於4.x版本icon文件分離出去所以還需要下載open-iconic：
npm i https://github.com/iconic/open-iconic.git -D(下載可能有點慢，要花個幾分鐘，可用cnpm下載) - 在index.js中引入
在3.x的基礎上引入
import 'open-iconic/font/css/open-iconic-bootstrap.css'
- 在webpack.config.js中配置
//處理字體文件，在3.x的基礎上多了一個otf
{test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}
- 在html中引用
<span class="oi oi-account-login"></span>
注：可在上邊的網站中找到使用方法，如圖，由於導入的Bootstrap Font的CSS文件所以只有第四種方式是可用的，每一種方式引用的文件不一樣，請配套使用
