目錄
一、loader處理css
1、css文件的創(chuàng)建
2、安裝css-loader
?3、配置
4、打包
?5、最終效果
二、loader處理圖片
1、引入圖片
2、安裝file-loader
3、配置module
4、webpack打包
?三、ES6轉(zhuǎn)ES5
1、介紹
2、安裝babel-loader
3、webpack.config.js配置
4、webpack打包
四、打包Vue
1、下載vue
2、引入、使用vue
五、分離vue
1、分離過程
2、設(shè)置vue子組件
?3、父、子組件傳參
回顧上一篇文章的例子，我們使用webpack來處理我們寫的js代碼，并且了解webpack會自動處理js之間相關(guān)的依賴
Vue2之webpack篇（一）傳統(tǒng)開發(fā)模式、ES6模塊化、CommonJS規(guī)范、webpack概念、webpack配置文件、項目管理文件https://blog.csdn.net/qq_51478745/article/details/127944476?spm=1001.2014.3001.5502在實際項目中不僅僅有js文件，還有css、圖片，ES6轉(zhuǎn)化ES5，TypeScript轉(zhuǎn)化ES5代碼，將less，scss轉(zhuǎn)化css，將jsx，vue文件轉(zhuǎn)化js文件等
對于webpack本身來說是不具備這些轉(zhuǎn)化功能的，這時候必須使用對應(yīng)的loader進行處理
一、loader處理css
1、css文件的創(chuàng)建
（1）在工程下創(chuàng)建一個css文件夾==》創(chuàng)建一個index.css文件
body{
background-color: skyblue;
}（2）在main.js文件中引入index.css文件
import indexCss from './css/index.css'（3）在項目終端進行webpack打包
此時報錯提醒，需要我們下載引用css的loader
2、安裝css-loader
（1）css-loader@5：5是版本號
npm install --save-dev css-loader@5（2）通過查看package.json文件，是否安裝成功
?3、配置
（1）在webpack.config.js文件配置【module】
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};（2）小伙伴們可以通過文檔，參考操作步驟
css-loader | webpack 中文文檔 | webpack 中文文檔 | webpack 中文網(wǎng)webpack 是一個模塊打包器。它的主要目標是將 JavaScript 文件打包在一起，打包后的文件用于在瀏覽器中使用，但它也能夠勝任轉(zhuǎn)換（transform）、打包（bundle）或包裹（package）任何資源(resource or asset)。https://www.webpackjs.com/loaders/css-loader/
4、打包
（1）在項目終端輸入webpack
此時發(fā)現(xiàn)又報錯了，是因為
（2）安裝style-loader
npm install --save-dev style-loader@2
?（3）再重新webpack
?5、最終效果
回到class.html界面啟動，會看到index.css渲染的body背景skyblue成功
二、loader處理圖片
1、引入圖片
（1）創(chuàng)建文件夾image==》引入一張本地圖片1.jpg
（2）將index.css修改，注意路徑
body{
background-image: url('../image/1.jpg');
}（3）此時webpack打包一樣開始報錯
告訴我們需要處理圖片的loader，即file-loader
2、安裝file-loader
項目終端輸入如下代碼：
npm install --save-dev file-loader@43、配置module
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
// 處理css中圖片的使用
{
test: /\.(png|jpg|git)$/,
/* 數(shù)組對象形式 */
use: [
{
// 使用file loader，解析文件路徑
loader: "file-loader",
},
],
},
],
},4、webpack打包
（1）此時又出現(xiàn)了問題，圖片無法正常顯示，是因為打包后的圖片路徑問題，因此還要再配置
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
// 處理css中圖片的使用
{
test: /\.(png|jpg|git)$/,
/* 數(shù)組對象形式 */
use: [
{
// 使用file loader，解析文件路徑
loader: "file-loader",
// 配置
options: {
// 指定html中引用圖片的相對html文件的路徑
publicPath: "./dist/",
// 指定文件名，一般會放在一個img相關(guān)的文件夾中
name: "imgs/[contenthash].[ext]",
},
},
],
},
],
},注意配置的dist路徑?
（2）再webpack打包，就成功顯示了
?三、ES6轉(zhuǎn)ES5
1、介紹
（1）當檢查打包后的文件有es6代碼，有的瀏覽器還不支持es6，所以有時候需要將es6的代碼轉(zhuǎn)化成es5
（2）例子：定時器箭頭函數(shù)
①在main.js文件中設(shè)置一個定時器
setTimeout(()=>{
console.log(0);
},1000)②終端webpack打包，頁面控制臺會延遲一秒鐘打印0
（3）此時去到項目的dist文件夾下的bundle.js文件，找到我們寫的箭頭函數(shù)
?可見此時打包后代碼是按照es6來寫，如果要將其按照es5來寫，需要babel-loader
2、安裝babel-loader
npm install @babel/core@7 @babel/preset-env@7 babel-loader@8 babel-preset-env3、webpack.config.js配置
// 處理es6
{
test: /\.js$/,
// 除去node_modules文件夾，避免項目依賴包和插件被更改
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}4、webpack打包
一樣可以正常顯示，此時觀察dist文件夾下的bundle.js文件
?打包完的代碼，已經(jīng)將我們寫的es6語法轉(zhuǎn)為es5語法
四、打包Vue
1、下載vue
npm i vue@22、引入、使用vue
（1）頁面顯示msg屬性的值，即我是vue
main.js文件
// vue
import Vue from "vue";
// new一個vue實例
new Vue({
el:'#app',//對class.html文件有id="app"屬性值標簽的掛載
data:{
msg:'我是vue'
}
})
class.html文件
<body>
<div id="app">{{msg}}</div>
</body>
?但是發(fā)現(xiàn)msg的值并未正常顯示，因此要配置vue
（2）webpack.config.js配置resolve
resolve: {
alias: {
// 指定使用vue包中的版本
'vue$': 'vue/dist/vue.esm.js'
}
}（3）class.html文件的js引入放到標簽下面
因為代碼運行順序是從上往下，如果vue實例在標簽之前運行，vue實例是找不到綁定id='app'的標簽
<body>
<div id="app"><h1>{{msg}}</h1></div>
<script src="./dist/bundle.js"></script>
</body>（4）webpack打包
五、分離vue
1、分離過程
（1）局部組件的語法糖
new Vue({
el:'#app',
template:'<App></App>',
components:{
App:{
template:'<h1>{{msg}}</h1>',
data(){
return {
msg:'我是vue'
}
}
}
}
})（2）組件單獨出來
const App = {
template:'<h1>{{msg}}</h1>',
data(){
return {
msg:'我是vue'
}
}
}
// new一個vue實例
new Vue({
el:'#app',//對class.html文件有id="app"屬性值標簽的掛載
template:'<App></App>',
components:{
App,//增強寫法
}
})
?（3）將組件對象單獨寫一個App.js文件
main.js文件
import Vue from "vue";
import App from "./App.js"
new Vue({
el:'#app',//對class.html文件有id="app"屬性值標簽的掛載
template:'<App></App>',
components:{
App,
}
})App.js
export default {
template: "<h1>{{msg}}</h1>",
data() {
return {
msg: "我是vue",
};
},
};（4）再分離，將template內(nèi)容單獨分離，引入一個vue文件寫
main.js
import Vue from "vue";
import App from "./App.vue"
new Vue({
el:'#app',
template:'<App></App>',
components:{
App,
}
})App.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default{
data() {
return {
msg: "我是vue",
};
},
}
</script>①webpack打包，此時又開始報錯，是因為沒有l(wèi)oader處理.vue這種文件類型
②安裝vue-loader，終端分別輸入下面兩個代碼
npm i vue-loader@14npm i vue-template-compiler③webpack.config.js文件配置modle
// .vue 相關(guān)的loader
{
test: /\.vue$/,
use: ['vue-loader'],
},④webpack打包即可
2、設(shè)置vue子組件
（1）創(chuàng)建文件夾view==》創(chuàng)建文件login.vue
<template>
<div>
<div class="box"></div>
</div>
</template>
<script>
export default {
data(){
return{}
}
};
</script>
<style scoped>
/* scoped表示設(shè)置的css樣式僅適用于當前.vue文件 */
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>（2）在App父組件注冊login子組件，并在頁面顯示
<template>
<div>
<h1>{{msg}}</h1>
<!-- 子組件login的使用 -->
<login></login>
</div>
</template>
<script>
import login from "./view/login.vue"
export default{
data() {
return {
msg: "我是vue",
};
},
components:{//注冊
login
},
}
</script>（3）webpack打包
?3、父、子組件傳參
（1）父組件向子組件傳遞點擊的城市
App.vue文件
<template>
<div>
<h1>{{msg}}</h1>
<ul>
<li v-for="item in cityArr" :key="item" @click="cityClick(item)">
<h1>{{ item }}</h1>
</li>
</ul>
<login :cityName="selectCity"></login>
</div>
</template>
<script>
import login from "./view/login.vue"
export default{
data() {
return {
msg: "我是vue",
cityArr:['重慶','天津','上海','北京'],
selectCity:null,
};
},
methods:{
cityClick(item){
console.log(item);
this.selectCity = item
}
},
components:{
login
},
}
</script>login.vue文件
<template>
<div>
<div class="box">
<h3>{{ cityName }}</h3>
</div>
</div>
</template>
<script>
export default {
data(){
return{}
},
props:{
cityName:{
type:String,
default(){
return '默認'
}
}
},
};
</script>
<style scoped>
/* scoped表示設(shè)置的css樣式僅適用于當前.vue文件 */
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
?
（2）子組件向父組件傳遞信息
App.vue
<template>
<div>
<h1>{{msg}}</h1>
<ul>
<li v-for="item in cityArr" :key="item" @click="cityClick(item)">
<h1>{{ item }}</h1>
</li>
</ul>
<login :cityName="selectCity" @login-btn="btnClick"></login>
</div>
</template>
<script>
import login from "./view/login.vue"
export default{
data() {
return {
msg: "我是vue",
cityArr:['重慶','天津','上海','北京'],
selectCity:null,
};
},
methods:{
cityClick(item){
console.log(item);
this.selectCity = item
},
btnClick(msg){
alert(msg)
}
},
components:{
login
},
}
</script>login.vue
<template>
<div>
<div class="box">
<h3>{{ cityName }}</h3>
<button @click="btnClick">點擊</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
msg:'我是子組件'
}
},
methods:{
btnClick(){
this.$emit('login-btn',this.msg)
}
},
props:{
cityName:{
type:String,
default(){
return '默認'
}
}
},
};
</script>
<style scoped>
/* scoped表示設(shè)置的css樣式僅適用于當前.vue文件 */
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
?（3）父子傳參詳細步驟的學習，小伙伴們可以參考小編下面的文章文章來源：http://www.zghlxwxcb.cn/news/detail-485207.html
Vue基礎(chǔ)語法（四）_申小兮IU的博客-CSDN博客父組件向子組件通信（數(shù)據(jù)傳遞），子組件向父組件通信，父組件訪問子組件，子組件訪問父組件https://blog.csdn.net/qq_51478745/article/details/127495034文章來源地址http://www.zghlxwxcb.cn/news/detail-485207.html
到了這里，關(guān)于Vue2之webpack篇（二）Loader的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![Webapck 解決：[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的問題](https://imgs.yssmx.com/Uploads/2024/02/787630-1.png)
