WEBPACK4打包總結（包含VUE打包）
webpack4
什麼是webpack
webpack是一個用於打包js檔案的軟體。
特點
對於打包後的js檔案其有如下特點：
- 指令相容
- 減少檔案數量
下載webpack
npm init -y
npm i webpack webpack-cli -D -g
指令說明：https://www.cnblogs.com/itlkNote/p/6830682.html
webpack簡單打包
指令打包
webpack 將要打包的檔案 --output 打包檔名
注意：如果js檔案中使用require引入了另一個js檔案那麼webpack會自動搜尋並一起打包。
配置檔案進行打包
- 新建一個檔案:webpack.config.js
- 寫入程式碼：
module.exports={
entry : ”main.js”,//入口檔案（你要打包的檔案）
output : {//出口檔案
filename:”build.js”,//檔名
path:__dirname + “/dist”//路徑，__dirname表示當前路徑
}
}
- 執行cmd指令：webpack
css檔案打包
下載庫
npm i style-loader css-loader -D
webpack.config.js檔案配置
module.exports={
entry:’打包檔案的路徑’,
output:{
filename:’打包後文件的名稱’，
path:__dirname+’資料夾’//__dir表示當前路徑
},
module:{
rules:[
{
test:/\.css$/,
use:[‘style-loader’,’css-loader’]
}
]
}
}
執行指令：webpack
打包url資源
下載庫
npm i style-loader css-loader file-loader url-loader -D
webpack.config.js檔案配置
module.exports={
entry:’打包的入口檔案’,
output:{//出口檔案
filename:’檔名’,
path:’檔案路徑（必須絕對路徑）’
},
module:{
rules:[
{
test:/\.css$/,
use:[‘style-loader’,’css-loader’]
},
{
test:/\.(png|gif|jpg)$/,
use:[
{
loader:’url-loader’,
options:{
limit:20000 //單位為B
}
}
]
}
]
}
}
執行：webpack
ES6轉ES5
下載庫
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
參考上述
配置package.json檔案
加入欄位：
"babel":{
"presets": ["env"],//表示轉換格式
"plugins": ["transform-runtime"]//確保vuejs可行
}
配置webpack.config.js檔案
module.exports={
entry:’打包檔案入口’,
output:{
filename:’檔名’,
path:’絕對路徑’
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/, //排除資料夾
use:[‘babel-loader’]
}
]
}
}
執行：webpack
vue模板檔案打包
下載：
npm i -D …
"vue-loader": "^15.4.0",
"vue-template-compiler": "^2.5.17",
"style-loader": "^0.22.1",
"file-loader": "^1.1.11",
npm i -save vue
配置檔案
hello.vue:
<template id="c1">
<div class="app">
<h1>{{t}}</h1>
</div>
</template>
<script>
export default {
data(){
return{
t:'hello World!!'
};
},
methods: {
}
}
</script>
<style>
.app{
color: red;
}
</style>
main.js//入口檔案引用
import Vue from "vue";//引入核心檔案
import temp from "../templates/hello.vue"//引入元件檔案
var vm = new Vue({
el:'#app',
data:{
//新增一些資料
},
render(cl) {//使用作為根元件
return cl(temp);
},
methods:{
//新增一些方法
}
})
webpack.config.js
var vue_loader_plugin = require(“vue-loader/lib/plugin”);//配合vue載入器的輔助外掛
//“這個外掛是必須的！“它的職責是將你定義過的其它規則複製並應用到.vue檔案裡相應語言的塊
module.exports={
entry:”main.js”,//入口
output:{
filename:”index.js”,
path:__dirname+”/dist”
},
module:{
rules:[
test::/\.vue$/,
use:[‘style-loader’,’vue-loader’]
]
},
plugins:[
new vue_loader_plugin()//使用引入的外掛
]
}
執行：webpack
熱過載
下載：
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
配置檔案
package.js
新增程式碼：
"scripts": {
"test": "webpack-dev-server --inlink --hot --port 3333"
},
--inlink 表示自動開啟瀏覽器
--hot表示自動重新整理
--port表示埠
--host表示主機地址
使用html-webpack-plugin外掛
提示：以下操作都處於webpack.config.js檔案中
第一步：引入外掛：
var cj = require(“html-webpack-plugin”);
第二步：使用外掛：
plugins:[
new cj(options)
]
options:
型別：objcet
引數：
filename:渲染後文件名
template:網頁模板路徑
title：網頁名稱
執行指令：npm run test
說明：test是前面scripts裡的屬性