一：創建一個新的工程，專案初始化
npm init -y
二：搭建專案框架
三：撰寫main.js檔案內容，在index.js中引入，在把index.js引入到index.html中
例：
export default()=>{
function computer(){
let h2=document.createElement("h2");
h2.innerHTML="Hello WebPack";
return h2;
}
document.body.appendChild(h2);
}
import h2 from "./js/main"
h2();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src=https://www.cnblogs.com/zsbb/p/"./index.js"></script>
</html>
四：安裝打包依賴,修改函式入口
npm i -D webpack webpack-cli
五：配置打包檔案webpack.config.js，（還可以在packge.json中宣告打包代碼，方便運行）——可寫可不寫
module.exports={
//入口
entry:["./src/index.js"],
//出口
output:{
//打包后的檔案路徑,默認也是dist檔案
path:__dirname+"/dist",
//檔案名稱,這里我用hash值來命名,防止每次打包名稱重復
filename:"[hash].js"
},
//配置打包環境/生產or開發
mode:"production"
}
六：打包成功后效果圖
七：插件應用（webpack-plugins）自動引入打包好的外部檔案
一：引入插件
npm i -D html-webpack-plugin
二：在webpack.config.json檔案中引入該插件并使用
const HemlWebpackPlugin =require("html-webpack-plugin")
module.exports={
//入口
entry:["./src/index.js"],
//出口
output:{
//打包后的檔案路徑,默認也是dist檔案
path:__dirname+"/dist",
//檔案名稱,這里我用hash值來命名,防止每次打包名稱重復
filename:"[hash].js"
},
//使用html-webpack-plugin插件
plugins:[
new HemlWebpackPlugin({
//模板路徑
template:"./src/index.html",
//打包生成的檔案名
filename:"index.html",
//指定標題
title:"Webpack Demo",
})
],
//配置打包環境/生產or開發
mode:"development"
}
三：運行打包后的效果圖
八：插件應用（Ts）
一：撰寫index.ts檔案
export default(x:number,y:number):number=>{
return x+y;
}
二：撰寫tsconfig.json檔案
{
"compilerOptions": {
//Es的目標版本
"target": "es2015",
//模板化規范版本
"module": "es2015",
//是否總是啟用嚴格模式
"alwaysStrict": true
}
}
三：撰寫webpack.config.js檔案并且修改packjson.js中的入口
const HemlWebpackPlugin =require("html-webpack-plugin")
module.exports={
//入口
entry:["./src/index.ts"],
//出口
output:{
//打包后的檔案路徑,默認也是dist檔案
path:__dirname+"/dist",
//檔案名稱,這里我用hash值來命名,防止每次打包名稱重復
filename:"[hash].js"
},
//模塊處理
module:{
//模塊轉換集合
rules:[
{
test: /\.ts$/, //匹配所有以.ts結尾的檔案
loader:"ts-loader",//使用ts-loader的模塊轉換器處理
exclude:/node_modules/ //排除掉的目錄檔案
},
]
},
//模塊決議處理
resolve:{
//決議所有以.js/.ts結尾的檔案
extensions:[".js",".ts"]
},
//使用html-webpack-plugin插件
plugins:[
new HemlWebpackPlugin({
//模板路徑
template:"./src/index.html",
//打包生成的檔案名
filename:"index.html",
//指定標題
title:"Webpack Demo",
})
],
//配置打包環境/生產or開發
mode:"development"
}
四：運行打包效果圖
九：插件應用（clean-webpack-plugin）打包后自動清理舊版本檔案
一：引入插件
npm i -D clean-webpack-plugin
二：撰寫webpack.config.js
const HemlWebpackPlugin =require("html-webpack-plugin");
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
module.exports={
//入口
entry:["./src/index.ts"],
//出口
output:{
//打包后的檔案路徑,默認也是dist檔案
path:__dirname+"/dist",
//檔案名稱,這里我用hash值來命名,防止每次打包名稱重復
filename:"[hash].js"
},
//模塊處理
module:{
//模塊轉換集合
rules:[
{
test: /\.ts$/, //匹配所有以.ts結尾的檔案
loader:"ts-loader",//使用ts-loader的模塊轉換器處理
exclude:/node_modules/ //排除掉的目錄檔案
},
]
},
//模塊決議處理
resolve:{
//決議所有以.js/.ts結尾的檔案
extensions:[".js",".ts"]
},
//使用html-webpack-plugin插件
plugins:[
new CleanWebpackPlugin({
//指定要洗掉的檔案型別
cleanAfterEveryBuildPatterns:["**/*.js"]
}),
new HemlWebpackPlugin({
//模板路徑
template:"./src/index.html",
//打包生成的檔案名
filename:"index.html",
//指定標題
title:"Webpack Demo",
})
],
//配置打包環境/生產or開發
mode:"development"
}
三：運行打包效果圖（自動洗掉了舊版本的檔案）
十：插件應用（webpack-dev-server）配置服務器打包完成后自動啟動頁面，并且可以開啟熱模塊替換
一：引入插件
npm i -D webpack-dev-server
二：撰寫webpack.config.js檔案，運行server的命令也可以打包到packjson.js中——可寫可不寫
devServer:{
//是否自動打開
open:true,
historyApiFallback: true,
//是否使用熱模塊替換
hot: true,
//是否壓縮
compress: true,
//地址
host: "本地地址——cmd=>ipconfig查看",
//埠
port: 8089
},
三：運行打包后效果圖
十一：插件應用（css-loader style-loader）
一：引入插件
npm i -D css-loader style-loader
二：撰寫css檔案并且在ts中引入
body{
background-color: bisque;
}
import console from "./js/typescript";
//匯入css,將把該css輸出參考到js的位置
import './css/index.css'
const x:number=200;
const y:number=100;
document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`
三：撰寫webpack.config.js檔案
module:{
//模塊轉換集合
rules:[
{
test: /\.css$/, //匹配所有以.css結尾的檔案
use:["style-loader","css-loader"],//從后向前使用loader處理指定檔案
exclude:/node_modules/ //排除掉的目錄檔案
},
{
test: /\.ts$/, //匹配所有以.ts結尾的檔案
loader:"ts-loader",//使用ts-loader的模塊轉換器處理
exclude:/node_modules/ //排除掉的目錄檔案
},
]
},
四：打包運行效果圖
十二：插件應用（node-sass sass-loader）
一：引入插件
npm i -D node-sass sass-loader
二：撰寫scss檔案并且在ts中引入
$color:#fff;
h1{
color: $color;
text-align: center;
}
import console from "./js/typescript";
//匯入css,將把該css輸出參考到js的位置
import './css/index.css'
import './css/index.scss'
const x:number=200;
const y:number=100;
document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`
三：撰寫webpack.config.js
rules:[
{
test: /\.css$/, //匹配所有以.css結尾的檔案
use:["style-loader","css-loader"],//從后向前使用loader處理指定檔案
exclude:/node_modules/ //排除掉的目錄檔案
},
{
test: /\.scss$/, //匹配所有以.css結尾的檔案
use:[
{loader:"style-loader"},//將css添加到js中生產的style節點中
{loader:"css-loader"},//加載css
{loader:"sass-loader"} //把scss處理成css
//倒處理，從下往上
]
},
{
test: /\.ts$/, //匹配所有以.ts結尾的檔案
loader:"ts-loader",//使用ts-loader的模塊轉換器處理
exclude:/node_modules/ //排除掉的目錄檔案
},
]
四：打包運行后效果圖
十三：插件應用（mini-css-extract-plugin）建議使用該方法，要不然css全放在js中js檔案太大，用戶打開頁面就很慢
一：引入插件
npm i -D mini-css-extract-plugin
二：撰寫webpack.config.js檔案
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
添加新的new MiniCssExtractPlugin()
plugins:[
new CleanWebpackPlugin({
//指定要洗掉的檔案型別
cleanAfterEveryBuildPatterns:["**/*.js"]
}),
new HemlWebpackPlugin({
//模板路徑
template:"./src/index.html",
//打包生成的檔案名
filename:"index.html",
//指定標題
title:"Webpack Demo",
}),
new MiniCssExtractPlugin()
],
替換掉所有的style.loader
rules:[
{
test: /\.css$/, //匹配所有以.css結尾的檔案
use:[MiniCssExtractPlugin.loader,"css-loader"],//從后向前使用loader處理指定檔案
exclude:/node_modules/ //排除掉的目錄檔案
},
{
test: /\.scss$/, //匹配所有以.css結尾的檔案
use:[
{loader:MiniCssExtractPlugin.loader},//將css添加到獨立的檔案中
{loader:"css-loader"},//加載css
{loader:"sass-loader"} //把scss處理成css
//倒處理，從下往上
]
},
{
test: /\.ts$/, //匹配所有以.ts結尾的檔案
loader:"ts-loader",//使用ts-loader的模塊轉換器處理
exclude:/node_modules/ //排除掉的目錄檔案
},
]
三：打包運行后的效果圖
十四：插件應用（html-loader）
一：引入插件
npm i -D html-loader
二：撰寫webpack.config.js檔案并且修改index.html以及ts檔案的引入組件的方式
rules:[
{
test:/\.html$/,
use:[{
loader:"html-loader",
options:{
minimize:true //是否壓縮html
}
}]
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<img src=https://www.cnblogs.com/zsbb/p/"./img/clw.jpg">
</body>
</html>
原來的ts會把我們顯示的圖片給重繪覆寫掉，所以這里我們要修改一下我們的ts生產組件的代碼
import console from "./js/typescript";
//匯入css,將把該css輸出參考到js的位置
import './css/index.css'
import './css/index.scss'
const x:number=200;
const y:number=100;
let p=document.createElement("div");
p.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`;
document.body.appendChild(p);
三：打包運行后的效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510957.html
標籤：Html/Css
上一篇：實作可拖拽側邊欄
下一篇：優化 JS 程式的一個小方法