1肝劲、安裝

1突雪、npm install -g webpack全局安裝
2闪唆、npm install --save-dev webpack項(xiàng)目根目錄

2碧库、編譯命令

webpack .\src\main.js

3柜与、配置文件webpack.config.js

webpack是基于nodejs進(jìn)行構(gòu)建的,支持node代碼

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

4、webpack-dev-server工具嵌灰，實(shí)現(xiàn)自動(dòng)打包編譯功能

工具會(huì)讀取項(xiàng)目根目錄下的webpack.config.js配置文件進(jìn)行打包構(gòu)建
安裝：npm i webpack-dev-server -D
1弄匕、必須要本地項(xiàng)目中安裝webpack，全局的不可以沽瞭。
2迁匠、使用在scripts下，加dev:'webpack-dev-server'驹溃。然后npm run dev可以開(kāi)始自動(dòng)打包編譯監(jiān)聽(tīng)代碼的改動(dòng)城丧。

image.png

image.png

webpack-dev-server幫我們打包生成的bundle.js并沒(méi)有存放到實(shí)際的物理磁盤(pán)上（非dist/bundle.js），而是直接托管到了電腦內(nèi)存中豌鹤，項(xiàng)目目錄中是找不到這個(gè)bundle.js的亡哄。所以引用路徑要修改為/bundle.js

webpack-dev-server常用命令

dev:'webpack-dev-server --open --port 3000 --contentBase src --hot'

5、html-webpack-plugin在內(nèi)存中生成html

webpack.config.js

//只要是plugin,放到plugins節(jié)點(diǎn)中去
const htmlWebpackPlugin =  require('html-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
plugins:[
  new htmlWebpackPlugin ({
template:path.join(__dirname,'./src/index.html'), //指定模板頁(yè)面布疙，生成內(nèi)存中的頁(yè)面
filename:'index.html'
})
]
};

此時(shí)在html中不再需要手動(dòng)引入 bundle.js了蚊惯，自動(dòng)創(chuàng)建了script標(biāo)簽引用了正確的bundle路徑

6、loader處理css表

webpack默認(rèn)只能打包js類(lèi)型的文件灵临，無(wú)法處理其他非js類(lèi)型的文件拣挪，如果要打包其他類(lèi)型文件，需手動(dòng)安裝第三方加載器俱诸。
main.js

import './css/index.css'
import './css/index.less'
import './css/index.scss'
//1菠劝、npm i style-loader css-loader -d
//2、在webpack.config.js中，配置一個(gè)節(jié)點(diǎn)module,是一個(gè)對(duì)象赶诊，包含rules屬性是個(gè)數(shù)組笼平，rules中存放了所有第三方文件的匹配和處理規(guī)則

webpack.config.js

module.exports = {
  ...
module:{
  rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//less文件的補(bǔ)充
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},/scss文件的補(bǔ)充
//匹配到以.css結(jié)尾的文件，調(diào)用loader時(shí),從右向左處理舔痪，即先css-loader,再style-loader寓调，
//處理結(jié)束后交給webpack進(jìn)行打包合并，最終輸出到bundle.js中去
  ]
}
};

7锄码、url-loader

webpack無(wú)法處理css中的url地址
安裝：npm i url-loader file-loader -d (file-loader是url-loader的內(nèi)部依賴(lài))

{test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=7221&name=[hash:8]-[name].[ext]'}

不加limit時(shí)發(fā)現(xiàn)圖片url會(huì)變成base64夺英。limit給定的值是圖片的大小，單位是byte滋捶，如果圖片大于或等于給定的limit值痛悯，不會(huì)轉(zhuǎn)為base64字符串，如果小于給定的limit則會(huì)轉(zhuǎn)為base64

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}

8重窟、babel

webpack默認(rèn)只能處理一部分es6新語(yǔ)法载萌，一些高級(jí)的es6等語(yǔ)法處理不了，需要借助第三方loader把高級(jí)語(yǔ)法轉(zhuǎn)為低級(jí)語(yǔ)法之后巡扇，把結(jié)果交給webpack去打包到bundle.js中,通過(guò)babel
1扭仁、安裝
第一套包 npm i babel-core babel-loader babel-plugin-transform-runtime -d
第二套包 npm i babel-preset-env babel-preset-stage-0 -d
2、配置
webpack.config.js配置文件中厅翔，在module節(jié)點(diǎn)下的rules中添加一個(gè)新的匹配規(guī)則
注意：配置babel的loader規(guī)則時(shí)乖坠，必須把node_modules目錄，通過(guò)exclude選項(xiàng)排除掉

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}//排除node_modules目錄下的js文件

3刀闷、在項(xiàng)目根目錄下新建一個(gè)叫做 .babelrc 的babel配置文件熊泵，屬于json格式

{
  "presets":["env","stage-0"],
  "plugins":["transform-runtime"]
}

9、在webpack構(gòu)建的項(xiàng)目中涩赢，使用vue

復(fù)習(xí)：在普通網(wǎng)頁(yè)中使用vue
1戈次、使用script 標(biāo)簽引入vue的包
2纷闺、在index頁(yè)面中均芽，創(chuàng)建一個(gè)id為 app的 div容器
3护奈、通過(guò) new Vue得到一個(gè)vm的實(shí)例

在webpack構(gòu)建的項(xiàng)目中，使用vue
1花墩、安裝vue包：npm i vue -s
2、使用vue模板頁(yè)面澄步，需要安裝相關(guān)loader：npm i vue-loader vue-template-compiler -d冰蘑，在配置文件中添加

{test:/\.vue$/,use:'vue-loader'}

3、main.js

import Vue from 'vue'
import login from './login.vue'//使用模板
//在webpack 中使用import Vue from 'vue'導(dǎo)入的vue構(gòu)造函數(shù)村缸，功能不完整祠肥，
//只提供了runtime-only的方式，并沒(méi)有提供像網(wǎng)頁(yè)中那樣的使用方式,這時(shí)候如果用new Vue 方式會(huì)報(bào)錯(cuò)
//如何修改梯皿，可以具體看下面的補(bǔ)充內(nèi)容
var vm=new Vue({
  el:'#app',
  data:{
    msg:'123'
  },
  render :function(createElements){//可以簡(jiǎn)化為render: c => c(login)
    return createElements(login)
  }
})

補(bǔ)充：包的查找規(guī)則
1.找 下面根目錄中有沒(méi)有 node_modules文件夾
2.在 node_modules文件夾中仇箱，根據(jù)包名县恕，這里用到的是vue，找到對(duì)應(yīng)的 vue 文件夾
3.在vue文件夾中剂桥，找一個(gè)叫做 package.json 的包配置文件
4.在 package.json 文件中忠烛，查找一個(gè) main 屬性【main屬性指定了這個(gè)包被加載時(shí)的入口文件】
修改vue被導(dǎo)入時(shí)包的路徑，除了修改這個(gè)main屬性外权逗，還可以美尸，在webpack.config.js里加一個(gè)節(jié)點(diǎn)

resolve:{
  alias:{
      "vue$":"vue/dist/vue.js"
  }
}

10、結(jié)合webpack使用vue-router

1斟薇、導(dǎo)入vue-router
2师坎、手動(dòng)安裝vue-router
3、創(chuàng)建路由對(duì)象
4奔垦、創(chuàng)建組件
5屹耐、將路由對(duì)象 掛載到vm上

import Vue form 'vue'
import VueRouter form 'vue-router'
Vue.use(VueRouter)
//導(dǎo)入app組件
import app from './app.vue'
//創(chuàng)建 apple 組件
import apple from './main/apple.vue'
var router = new VueRouter({
  routes:[
    {
      path:'/apple',
      component:apple,
      //添加子路由children:[{ path:'red',component:red},{ path:'green',component:green}]
    }
  ]
})
var vm=new Vue({
  el:'#app',
  render: c => c(app)，
  router
})

app.vue

<router-link to="/apple">apple</router-link>
<router-view></router-view>

將main.js進(jìn)行改造椿猎，將路由模塊單獨(dú)提取router.js

//創(chuàng)建 apple 組件
import VueRouter form 'vue-router'
import apple from './main/apple.vue'
var router = new VueRouter({
  routes:[
    {
      path:'/apple',
      component:apple,
      //添加子路由children:[{ path:'red',component:red},{ path:'green',component:green}]
    }
  ]
})
export default router

一些隨機(jī)補(bǔ)充

image.png