webpack 是什么？
打包工具 （靜態資源打包工具）
webpack 的特點？
- js依賴進行整合處理 （打包整合）
- 一些預處理的sass，less可以在環境中進行編譯 （轉換）
- 可以對js、html、圖片等進行壓縮 （優化）
webpack的核心？
- entry 入口檔案 // 好比main.js
- output 出口檔案 // 好比dist 打包之后的檔案夾
- plugin 插件 // 自動生成html檔案等插件
- loader 轉換器 // sass less 轉換成我們想要的檔案型別
- dev-serve 服務器 // 使我們webpack在本地運行 服務
- mode 模式 // 可以切換開發環境 和 生成環境
webpack 手動搭建步驟
- 創建一個檔案夾，然后在小黑框進行安裝
npm install webpack --save-dev
npm install webpack-cli --save-dev
- 確認 當前環境有沒有
webpack -v
- 在想要成為 打包檔案的檔案夾中，使用
npm init -y
初始化一個package.json
- 創建一個src，src下面創建一個index.html ,里面加一個div div隨便起一個 id 名字，讓引入bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>
- src 中創建一個 main.js 作為主要開發檔案，在里面進行dom操作，操作html中的div
let app =document.querySelector("#app")
let box =document.getElementById("box")
app.innerHTML ="今天心情就像天氣一樣好！"
box.innerHTML="hello webpack!"
- 創建一個webpack.config.js檔案
const path = require("path")
module.exports = {
entry:"./src/main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
}
}
-
運行webpack命令就可以進行打包
-
建立本地服務器
cnpm i webpack-dev-server -D
- 在package.json中配置
“dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 8888 --contentBase src --hot"
},
- npm run dev 運行
- 安裝sass
cnpm i node-sass sass-loader style-loader css-loader -D
在webpack.config.js 配置sass規則
module: {
rules: [
//決議.scss檔案,對于用 import 或 require 引入的sass檔案進行加載，以及...宣告的內部樣式進行加載
{
test: /\.scss$/,
use:['style-loader', 'css-loader', 'sass-loader']
}
]
}
- 自動生成html頁面 下載依賴
cnpm i html-webpack-plugin -D
在webpack.config.js中引入 const htmlWebpackPlugin = require(“html-webpack-plugin”)
在webpack.config.js 配置
// 插件
plugins:[
new htmlWebpackPlugin({
filename:“index.html”,
template:path.join(__dirname,‘index.html’)
})
],
- 配置完之后 運行即可, index.html 模板拿到和src同級
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/224104.html
標籤：其他