視頻資源來自：b站coderwhy王紅元老師——最全最新Vue、Vuejs教程，從入門到精通
文章僅為個(gè)人觀看視頻后的學(xué)習(xí)心得筆記，用于個(gè)人查看和記錄保存。文中定有疏漏錯(cuò)誤之處，懇請(qǐng)指正。

webpack詳解

認(rèn)識(shí)webpack

什么是Webpack

image-20210707110422055

前端模塊化

和grunt/gulp的對(duì)比

面試可能會(huì)問

grunt/gulp的核心是Task

如果工程模塊依賴非常簡(jiǎn)單，甚至是沒有用到模塊化的概念。只需要進(jìn)行簡(jiǎn)單的合并、壓縮，就使用grunt/gulp即可。

如果整個(gè)項(xiàng)目使用了模塊化管理，而且相互依賴非常強(qiáng)，使用webpack[強(qiáng)調(diào)模塊化開發(fā)管理]打包。

image-20210707112628116

webpack的安裝

node 10.13.8

webpack的起步

src：源碼

dist：distribution打包好了的，發(fā)布

Terminal:

D:\study\vue\臨時(shí)\LearnVuejs04-v2\01-webpack的使用\01-webpack的起步>webpack ./src/main.js ./dist/bundle.js

把main.js打包成bundle.js

//使用commomjs的模塊化規(guī)范
const {add,mul} = require('./mathUtils')
console.log(add(20,30));

//使用ES6的模塊化的規(guī)范
import {name,age,height} from "./info"
console.log(name);

webpack的配置

入口和出口

創(chuàng)建webpack.config.js

const path = require('path')
//這個(gè)時(shí)候控制臺(tái)按npm init

module.exports = {
  entry: './src/main.js',
  output: {
    //動(dòng)態(tài)獲取路徑
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },
}
//控制臺(tái)敲 webpack，如果文件名不是上面的，那webpack后面還要跟config的文件名

const path = require('path')——node自帶的包，得出當(dāng)前路徑

path.resolve()——連接兩個(gè)路徑

__dirname——node帶的，表示當(dāng)前路徑

npm init——對(duì)其初始化

D:\study\vue\臨時(shí)\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See npm help json for definitive documentation on these fields
and exactly what they do.

Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (02-webpack的配置)
Sorry, name can only contain URL-friendly characters.
package name: (02-webpack的配置) meetwebpack
version: (1.0.0)
description:
entry point: (webpack.config.js) index.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\study\vue\臨時(shí)\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置\package.json:

{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

Is this OK? (yes)

D:\study\vue\臨時(shí)\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>

image-20210707155146527

build是自己取的，npm run build相當(dāng)于執(zhí)行webpack

↑會(huì)先找本地，找不到再找全局

局部安裝webpack

npm install webpack@3.6.0 --save-dev——本地安裝webpack（開發(fā)者模式）

如果在終端[webstorm或者cmd]里敲webpack，始終是找全局的。

但是npm run build和node_modules/.bin/webpack※嘗試失敗※優(yōu)先用本地的

css-loader的使用

什么是louder

將ES6轉(zhuǎn)成ES5代碼，將TypeScript轉(zhuǎn)成ES5代碼，將scss、less轉(zhuǎn)成css，將.jsx、.vue文件轉(zhuǎn)成js文件等等

css文件處理

安裝 css-loader：npm install --save-dev css-loader@2.0.2

在mian.js里添加require('./css/normal.css')。不需要傳出對(duì)象，因?yàn)椴粫?huì)用，只是是其產(chǎn)生依賴，才能打包

此時(shí)的webpack.config.js

const path = require('path')
//這個(gè)時(shí)候控制臺(tái)按npm init

module.exports = {
  entry: './src/main.js',
  output: {
    //動(dòng)態(tài)獲取路徑
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },
   module: {
    rules: [
      {
        //正則表達(dá)式
        test: /\.css$/i,
        //webpack使用多個(gè)louder時(shí)，是從右向左讀的。先處理css后style
        use: ["style-loader","css-loader"],
      },
    ],
  },
}

style-loader 將模塊導(dǎo)出的內(nèi)容作為樣式并添加到 DOM 中

安裝：npm install --save-dev style-loader@0.23.1

css-loader 只負(fù)責(zé)加載css

less文件處理

less-loader 加載并編譯 LESS 文件

安裝：npm install --save-dev less-loader less@4.1.0

圖片文件的處理

安裝：npm install --save-dev url-loader@1.1.2

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
      //當(dāng)加載的圖片小于limit時(shí)，會(huì)將圖片編譯成base64字符串格式
      //如果limit太大，瀏覽器加載的圖片也會(huì)那么多，加載時(shí)間長(zhǎng)
        limit: 13000,
        //不加中括號(hào)文件名字就叫name了
        name: 'img/[name].[hash:8].[ext]'
      }
    }
  ]
}

如果圖片超過limit，則需要用file-loader。

對(duì)于需要打包的大圖片：

webpack.config.js 里的 module.exports里的方法

output: {
    //動(dòng)態(tài)獲取路徑
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    //只要是url開頭的，地址前默認(rèn)加上↓
    publicPath: 'dist/'
  },

打包的圖片自動(dòng)命名為一個(gè)32位的hash值[為了防止重復(fù)]

太長(zhǎng)一串了??！于是：自定義修改打包后的圖片名，在option里添加

name: 'img/[name].[hash:8].[ext]'——所有打包的圖片都放在dist的img文件夾中。文件命名為：文件原名.截取8位hash值.文件原后綴名

Babel的使用

將ES6的語法轉(zhuǎn)成ES5[沒有const]

安裝：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置：

{
  test: /\.js$/,
  //exclude:排除
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

webpack中配置Vue

引入vue.js

引用：import Vue from 'vue' 為什么可以這樣寫？↓

沒有寫路徑時(shí)，就去model里找。model里邊默認(rèn)導(dǎo)出的就是Vue：export default Vue

下載：npm install vue@2.5.21 --save

-dev 表示開發(fā)時(shí)依賴，因?yàn)轫?xiàng)目中會(huì)使用Vue.js所以不加dev

報(bào)錯(cuò)：

runtime-only ：代碼中，不可以有任何的templa

runtime-complier ：代碼中，可以有template，因?yàn)橛衏omplier可以用于編譯template

alias：別名廖雪峰：git教程

webpack配置

resolve: {
  //alias：別名
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

指定方式找文件夾，否則就默認(rèn)找vue.runtime.js了。指定找vue.esm.js
$表示結(jié)束

SPA(simple Page web application) -> vue-router(前端路由)

el和template區(qū)別

template會(huì)替換el

使用.vue文件時(shí)

npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev

省略后綴名：webpack配置的resolve解決問題的

extensions: ['.js','.css','.vue']

plugin的使用

plugin：框架/插件

react -> MIT

添加版權(quán)的Plugin

webpack配置文件：

plugins:[
   new webpack.BannerPlugin('最終版權(quán)歸YY所有')
]

image-20210707230522018

打包html的plugin

將index.html文件打包到dist文件夾

下載：npm install html-webpack-plugin@3.2.0 --save-dev

引用：const HtmlWebpackPlugin = require('html-webpack-plugin')

在plugins里

new HtmlWebpackPlugin({
  template: 'index.html'
})

使得每次新生成的html文件里自動(dòng)引入原h(huán)tml的<div id="app"></div>

js壓縮的Plugin

打包的時(shí)候才用

下載：npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

然后生成的js代碼會(huì)很丑，，擠在一起

搭建本地服務(wù)器

存儲(chǔ)在內(nèi)存里，npm run build后才會(huì)存儲(chǔ)到磁盤里

下載：npm install --save-dev webpack-dev-server@2.9.1

配置：開發(fā)的時(shí)候才用

devServer: {
  contentBase: './dist',
  inline: true
}

json增加描述"dev": "webpack-dev-server"

cmd：npm run dev

在cmd點(diǎn)端口號(hào)進(jìn)入

終止批處理操作：ctrl+c

webpack配置的分離

公共環(huán)境、生產(chǎn)環(huán)境、開發(fā)環(huán)境分離

公共環(huán)境：就是之前配置文件的內(nèi)容，去除了開發(fā)環(huán)境、生產(chǎn)環(huán)境的部分。base.config.js

開發(fā)環(huán)境：dev.config.js

/*開發(fā)環(huán)境，添加對(duì)公共環(huán)境的依賴*/
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig,{
  devServer: {
    contentBase: './dist',
    inline: true
  }
})

生產(chǎn)環(huán)境：prod.config.js

/*生產(chǎn)環(huán)境，添加對(duì)公共環(huán)境的依賴*/
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig,{
  plugins:[
    new UglifyJSPlugin()
  ],
})

指令修改：

"build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"

總目錄：
總目錄：
邂逅Vuejs
Vue基礎(chǔ)語法
 組件化開發(fā)
前端模塊化
webpack詳解
Vue CLI詳解
 vue-router
Promise的使用
Vuex詳解
網(wǎng)絡(luò)模塊封裝
項(xiàng)目實(shí)戰(zhàn)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue學(xué)習(xí)筆記——webpack詳解

Vue學(xué)習(xí)筆記——webpack詳解

webpack詳解

認(rèn)識(shí)webpack

什么是Webpack

前端模塊化

和grunt/gulp的對(duì)比

webpack的安裝

webpack的起步

webpack的配置

入口和出口

局部安裝webpack

css-loader的使用

什么是louder

css文件處理

less文件處理

圖片文件的處理

Babel的使用

webpack中配置Vue

引入vue.js

el和template區(qū)別

plugin的使用

添加版權(quán)的Plugin

打包html的plugin

js壓縮的Plugin

搭建本地服務(wù)器

webpack配置的分離

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue學(xué)習(xí)筆記——webpack詳解

webpack詳解

認(rèn)識(shí)webpack

什么是Webpack

前端模塊化

和grunt/gulp的對(duì)比

webpack的安裝

webpack的起步

webpack的配置

入口和出口

局部安裝webpack

css-loader的使用

什么是louder

css文件處理

less文件處理

圖片文件的處理

Babel的使用

webpack中配置Vue

引入vue.js

el和template區(qū)別

plugin的使用

添加版權(quán)的Plugin

打包html的plugin

js壓縮的Plugin

搭建本地服務(wù)器

webpack配置的分離

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av