webpack是什么
靜態資源打包工具（簡稱打包工具） ------------------------前端必備
webpack核心
1.入口檔案（entry）： 好比main.js
2.出口檔案（output）：好比dist 打包之后的檔案夾
3.插件（plugins）：自動生成html檔案等插件
4.轉換器（loader）：sass less 轉換成我們想要的檔案型別
5.服務器（dev-serve）：使我們webpack在本地運行 服務
6.模式（mode）：可以切換開發環境 和 生成環境
webpack特點
1.js依賴進行整合處理 （打包整合）
2.一些預處理的sass，less可以在環境中進行編譯 （轉換）
3.可以對js、html、圖片等進行壓縮 （優化）
webpack搭建步驟
全域安裝webpack
npm install webpack webpack-cli –g
如果因為版本過高，無法執行相關指令，請安裝其他版本
直接重新安裝就行，使用 npm i webpack@4.35.3 -g
創建本地專案：
首先使用 npm init -y 命令，初始化一個package.json
創建一個src檔案夾，src中創建一個index.html，src 中創建一個 main.js 作為主要開發檔案，
index.html里面加一個div，div隨便起一個 id，將其引入bundle.js
在main.js進行dom操作，操作html中的root div，
打包命令
webpack src/main.js --output src/bundle.js
如果不想每次修改都需要打包一次，可以一直執行，就操作下面的內容
創建一個webpack.config.js檔案 （和src同級目錄下）
里面引入：
const path = require(“path”)
module.exports = {
entry:"./src/main.js",
output:{
filename:“bundle.js”,
path:path.resolve(__dirname,“dist”)
}
}
建立本地服務器
cnpm i webpack-dev-server -D
將其引入到package.json中
“dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
完成運行
命令npm run dev
如果報錯，解決報錯 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
再次執行完成運行命令
npm run dev
以上內容就是webpack基本操作程序
如果需要用到sass，首先需要安裝
下載依賴 cnpm i node-sass sass-loader style-loader css-loader -D
在webpack.config.js 配置 規則
module: {
rules: [
//決議.scss檔案,對于用 import 或 require 引入的sass檔案進行加載，以及…宣告的內部樣式進行加載
{
test: /.scss$/,
use:[‘style-loader’, ‘css-loader’, ‘sass-loader’]
}
]
}
下載依賴 cnpm i html-webpack-plugin -D
在webpack.config.js 配置 插件
//引入
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
// 插件
plugins:[
new htmlWebpackPlugin({
filename:“index.html”,
template:path.join(__dirname,‘index.html’)
})
],
專案檔案夾中創建css檔案夾，在css檔案中創建scss
index.html 模板拿到和src同級
配置完之后 運行即可,
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/224024.html
標籤：其他
下一篇：Mybatis或Mybatis-Plus框架的xml檔案中特殊符號的使用（＜、＜= 、＞、 ＞=、&、‘、“ ）