1.安裝
npm i [email protected] -D
2.編譯打包生成build.js
看下目錄結構
首先新建一個main.js.
main.js是整個程序的入口文件。
main.js中
import Vue from "./vue.js"
import App from './App.js'
new Vue({
el: "#app",
components: {
app:App
},
template : `<app/>`
})
App.js中
var app = {
template: `
<div>我是一個入口組件1111</div>
`
};
export default app;
index.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./build.js"></script>
</html>
控制檯輸入webpack ./main.js build.js就會生成build.js文件了
3.自動編譯打包
新建webpack.config.js
module.exports = {
//入口
entry : {
//可以有多個入口，也可以有一個，如果有一個就默認從這一個入口開始解析
"main" : "./main.js"
},
//出口
output: {
filename : "./build.js"
},
//文件監視該動，自動產出build.js
watch : true
}
package.json文件中
{
"name": "vue-cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.6.10",
"vue-router": "^3.0.6",
"webpack": "^3.6.0"
},
"devDependencies": {},
"scripts": {
"build" : "webpack",
},
"author": "",
"license": "ISC"
}
控制檯輸入npm run build就可以了，當代碼發生變化時候，將會自動編譯打包
如果新建的配置文件名字不是webpack.config.js，比如說是webpack.dev.config.js，則需要在packsge.json文件裏進行配置
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"webpack": "^3.12.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build" : "webpack"
"dev" : "webpack --config ./webpack.dev.config.js"
},
"author": "",
"license": "ISC"
}
配置完後在控制檯輸入npm run dev進行編譯打包
4.下載配置loader，編譯樣式文件
如果引入樣式文件不配置對應的loader的話，編譯的時候會報錯
下載loader
npm i css-loader style-loader -S
配置loader
module.exports = {
//入口
entry : {
//可以有多個入口，也可以有一個，如果有一個就默認從這一個入口開始解析
"main" : "./main.js"
},
output: {
filename : "./build.js"
},
//聲明模塊，包含各個loader
module: {
loaders: [
{
//遇到後綴爲.css的文件，webpack先用css-loader加載器去解析這個文件
//最後計算完的css，將會使用style-loader生成一個內容爲最終解析完成的css代碼的style標籤放到head標籤裏。
test: /\.css$/,
loader : 'style-loader!css-loader'
}
]
},
//文件監視該動，自動產出build.js
watch : true
}
main.js中引入樣式文件
import './main.css'
5.下載配置loader，編譯打包圖片
不配置的話報錯
ERROR in ./article6.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./App.js 1:0-35
@ ./main.js
下載loader
npm i url-loader file-loader -S
配置loader
//對於圖片的大小小於limit的圖片，使用base64編碼，可以減少一次圖片的網絡請求；那麼對於比較大的圖片，使用base64就不適合了
//編碼會和html混在一起，一方面可讀性差，另一方面加大了html頁面的大小。因此設置一個合理的limit是非常有必要的
{
test: /\.(jpg|png|jpeg|gif|svg)$/,
loader : 'url-loader?limit=80000'
}
App.js中
import img from './a.png';
var app = {
template: `
<div>
我是一個入口組件
<img :src="imgSrc"/>
</div>
`,
data() {
return {
imgSrc:img
}
}
};
export default app;
6.less-loader
下載loader
npm i less -S //先下載less模塊
npm i less-loader -S
配置loader
{
test: /\.less$/,
loader : 'style-loader!css-loader!less-loader'
}