webpack 概述

webpack 是一個(gè)現(xiàn)代 javascript 應(yīng)用程序的 靜態(tài)模塊打包器 (module bundler)

webpack官網(wǎng)(https://webpack.js.org/)

webpack 能做什么

webpack是一個(gè)靜態(tài)模塊打包器

語(yǔ)法轉(zhuǎn)換

less/sass/stylus轉(zhuǎn)換成css
ES6轉(zhuǎn)換成ES5
...

html/css/js 代碼壓縮合并 (打包)
webpack可以在開(kāi)發(fā)期間提供一個(gè)開(kāi)發(fā)環(huán)境

自動(dòng)打開(kāi)瀏覽器
保存時(shí)自動(dòng)刷新

項(xiàng)目一般先打包再上線

webpack 的基本使用

webpack基本打包配置

建目錄 dist src/main.js
初始化
```
yarn init -y
```
安裝依賴(lài)包 (-D 將依賴(lài)記錄成開(kāi)發(fā)依賴(lài), 只是開(kāi)發(fā)中需要用的依賴(lài), 實(shí)際上線不需要的)
```
yarn add webpack  webpack-cli  -D
```

到package.json文件中, 配置scripts

scripts: {
 "build": "webpack --config webpack.config.js"
}

提供 webpack.config.js

參考文檔: https://webpack.docschina.org/concepts/#入口-entry-

const path = require('path')

module.exports = {
  // entry: 配置入口文件 (從哪個(gè)文件開(kāi)始打包)
  entry: './src/main.js',

  // output: 配置輸出 (打包到哪去)
  output: {
    // 打包輸出的目錄 (必須是絕對(duì)路徑)
    path: path.join(__dirname, 'dist'),
    // 打包生成的文件名
    filename: 'bundle.js'
  },

  // 打包模式 production 壓縮/development 不壓縮
  mode: 'development'
}

執(zhí)行配置的scripts腳本
```
yarn build
```

小測(cè)試:

假定在main.js中導(dǎo)入一個(gè) aa.js, 多個(gè)文件需要打包, wepack會(huì)打包成一個(gè)文件, 可以節(jié)約請(qǐng)求的次數(shù)

require('./aa.js')
console.log('這是main模塊')

基于 webpack 實(shí)現(xiàn)隔行變色

新建 public/index.html 編寫(xiě)代碼

在 index.html 中新建一些 li 玩玩

<!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">
  <!-- ul>li{我是第$個(gè)li}*10 -->
  <ul>
    <li>我是第1個(gè)li</li>
    <li>我是第2個(gè)li</li>
    <li>我是第3個(gè)li</li>
    <li>我是第4個(gè)li</li>
    <li>我是第5個(gè)li</li>
    <li>我是第6個(gè)li</li>
    <li>我是第7個(gè)li</li>
    <li>我是第8個(gè)li</li>
    <li>我是第9個(gè)li</li>
  </ul>
</div>

<script src="../dist/bundle.js"></script>
</body>
</html>

需求:

使用 jquery 隔行變色

安裝jquery

yarn add jquery

main.js

// 需求: 通過(guò)jquery實(shí)現(xiàn)隔行變色
const $ = require('jquery')
$(function() {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'green')
})

自動(dòng)生成html - html-webpack-plugin插件

在 index.html 中手動(dòng)引入打包后的資源，是有缺點(diǎn)的

比如: 如果webpack 配置中的輸出文件名修改了，需要及時(shí)在 index.html 中同步修改

下載 (-D 將依賴(lài)記錄成開(kāi)發(fā)依賴(lài), 只在開(kāi)發(fā)階段用, 實(shí)際上線是不需要的)
```
yarn add html-webpack-plugin  -D
```
在webpack.config.js文件中，引入這個(gè)模塊 :

 ```js
 // 引入自動(dòng)生成 html 的插件
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 ```

配置

plugins: [
  new HtmlWebpackPlugin({ template: './public/index.html' })
]

配置好了之后, public 目錄的 index.html 就不需要引入打包后的文件了, 會(huì)自動(dòng)被插件生成 html 引入

webpack - loaders 的配置

webpack默認(rèn)只認(rèn)識(shí) js 文件, 但是webpack 可以使用 loader (https://www.webpackjs.com/concepts/loaders)來(lái)加載預(yù)處理文件, 允許webpack也可以打包 js之外的靜態(tài)資源。

所以webpack如果要處理其他文件類(lèi)型, 記得要先配置對(duì)應(yīng)的 loader

webpack中處理 css 文件

需求: 去掉小圓點(diǎn), 新建 css 目錄

安裝依賴(lài)
```
yarn add style-loader css-loader -D
```

配置

module: {
  // loader的規(guī)則
  rules: [
    {
      // 正則表達(dá)式，用于匹配所有的css文件
      test: /\.css$/,
      // 先用 css-loader 讓webpack能夠識(shí)別 css 文件的內(nèi)容
      // 再用 style-loader 將樣式, 以動(dòng)態(tài)創(chuàng)建style標(biāo)簽的方式添加到頁(yè)面中去
      use: [ "style-loader", "css-loader"]
    }
  ]
},

分離 css 文件

將css放到了style標(biāo)簽中, 請(qǐng)求次數(shù)是少了,

但是如果css文件太大的話，也不是太好，那有沒(méi)有什么辦法把css分離出來(lái)呢？

有一個(gè)插件，mini-css-extract-plugin，這個(gè)插件支持webpack4.x
之前的插件extract-text-webpack-plugin對(duì)webpack3.x的版本支持 (目前已廢棄)

安裝依賴(lài)包
```
yarn add mini-css-extract-plugin -D
```
在webpack.config.js文件中，引入這個(gè)模塊

// 引入分離 css 文件的 模塊
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

配置loaders

// 模塊加載
module: {
  // loader的規(guī)則
  rules: [
    // 配置 css 文件的解析
    {
      test: /\.css$/,
      use: [ // 根據(jù)官方文檔寫(xiě)的，注意'css-loader'的書(shū)寫(xiě)位置
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath:'../',
          },
        },
        'css-loader'
      ]
    },
  ],
}

插件的配置

// 配置插件
plugins: [
 ...
  // 定義打包好的文件的存放路徑和文件名
  new MiniCssExtractPlugin({ 
   filename:'css/index.css'
  })
],

webpack 中處理 less 文件

下載依賴(lài)包
注意: 解析less文件需要識(shí)別 less 語(yǔ)法, 所以除了 less-loader 需要額外下載 less 包
less-loader: 將less轉(zhuǎn)換成 css
```
yarn add less  less-loader  -D
```

配置

// 配置 less 文件的解析
{
  test: /\.less$/,
  use: [
    // 分離出 css 內(nèi)容
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
          publicPath:'../',
      },
    }, 
    'css-loader',
    'less-loader' 
  ]
}

webpack 中處理圖片 - url-loader

我們?cè)嚵艘幌拢?code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;background: rgb(248, 245, 236);color: rgb(255, 53, 2);line-height: 1.5;font-size: 90%;padding: 3px 5px;border-radius: 2px;">css中用到一下背景圖片，結(jié)果就報(bào)錯(cuò)了，難道webpack連圖片也認(rèn)不出來(lái)嗎？

沒(méi)有錯(cuò)，的確認(rèn)不出來(lái), 此時(shí)需要轉(zhuǎn)換圖片的 loader, 來(lái)處理圖片的問(wèn)題, 主要用到 url-loader 和 file-loader

注意: url-loader 中的部分功能要用到 file-loader, 要下載兩個(gè)模塊

下載依賴(lài)包
```
yarn add url-loader file-loader -D
```

配置loader

{
  test: /\.(png|jpg|gif)$/i,
  use: [
    { loader: 'url-loader' }
  ]
}

圖片默認(rèn)轉(zhuǎn)成 base64 字符串了,

所以需要通過(guò) options 配置選項(xiàng)進(jìn)行配置 limit, 可以設(shè)置一個(gè)臨界值, 大于這個(gè)值會(huì)整個(gè)文件直接打包到目錄中, 得到是路徑,

如果小于這個(gè)值, 就會(huì)轉(zhuǎn)成 base64, 節(jié)約請(qǐng)求的次數(shù)

{
  test: /\.(png|jpg|gif)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        // 超過(guò) 8k 就不轉(zhuǎn) base64, 小于 8k 才轉(zhuǎn)
        limit: 8 * 1024
      }
    }
  ]
}

好處就是瀏覽器不用發(fā)請(qǐng)求了，直接可以讀取
壞處就是如果圖片太大，再轉(zhuǎn)base64就會(huì)讓圖片的體積增大 30% 左右, 得不償失

清除dist目錄的插件

使用 clean-webpack-plugin插件 (https://www.webpackjs.com/guides/output-management/#%E6%B8%85%E7%90%86-dist-%E6%96%87%E4%BB%B6%E5%A4%B9) 在每次打包前清除下dist文件夾。

安裝依賴(lài)包

yarn add clean-webpack-plugin -D

webpack.config.js

// 其他代碼

// 導(dǎo)入清除插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // 其他配置

    plugins: [
      // ....
      // 調(diào)用清除打包目錄插件
      new CleanWebpackPlugin()
    ]
};

配置圖片的打包輸出目錄

默認(rèn)是直接輸出到了 dist 根目錄, 可以通過(guò) options 進(jìn)行配置

{
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        // 超過(guò) 8k 就不轉(zhuǎn) base64, 小于 8k 才轉(zhuǎn)字符串
        limit: 8 * 1024,
        // 配置輸出的文件名
        name: '[name].[ext]',
        // 配置靜態(tài)資源的引用路徑
        publicPath: "../images/",
        // 配置輸出的文件目錄
        outputPath: "images/"
      }
    }
  ]
}

webpack開(kāi)發(fā)服務(wù)器

webpack 使用 babel 處理高版本的 js 語(yǔ)法

babel 的介紹 => 用于處理高版本 js語(yǔ)法的兼容性

安裝包

yarn add -D babel-loader @babel/core @babel/preset-env

配置規(guī)則

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

webpack-dev-server自動(dòng)刷新

下載

yarn add webpack-dev-server -D

配置scripts

scripts: {
 "build": "webpack --config webpack.config.js"
 "dev": "webpack-dev-server --config webpack.config.js"
}

webpack-dev-server 的配置

module.exports = {
  ...
 devServer: {
   port: 3000, // 端口號(hào)
   open: true // 自動(dòng)打開(kāi)瀏覽器
 }
}

生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境

生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境剛好相反，開(kāi)發(fā)環(huán)境在本地運(yùn)行，而生產(chǎn)環(huán)境是要產(chǎn)出運(yùn)行在線上服務(wù)器面向用戶使用的代碼，因此兩者的構(gòu)建目標(biāo)差異很大，比如打包后的文件在生產(chǎn)環(huán)境中要盡可能的小，邏輯代碼分離，優(yōu)化靜態(tài)資源（壓縮圖片）等。

因此開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境不能共用一份webpack配置文件，需要分別指定

但是兩個(gè)環(huán)境還是有很多配置可以共用的，比如entry、output、module等，因此可以把公共部分的配置抽離出來(lái)放到一個(gè)獨(dú)立的文件然后進(jìn)行合并，我們可以使用webpack-merge工具來(lái)進(jìn)行合并。

注意： entry、output、module這些配置在我們當(dāng)前示例通用，但未必適合所有項(xiàng)目。

安裝依賴(lài)

yarn add webpack-merge -D

開(kāi)始拆分webpack.config.js文件，拆分后這個(gè)文件就不要了。

新建config文件夾:

- webpack-demo
  - config     // 存放配置文件的文件夾
    - webpack.base.js // 公共的配置
    - webpack.dev.js // 開(kāi)發(fā)環(huán)境的配置
    - webpack.pro.js // 生成環(huán)境的配置

  - // 其他文件

配置文件

config/webpack.base.js

// 存放公共的部分
const path = require('path')

// 引入自動(dòng)生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 引入分離 css 文件的 模塊
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 導(dǎo)入清除插件, 可以在每次打包之前, 清除 dist目錄的內(nèi)容
const { CleanWebpackPlugin } = require('clean-webpack-plugin')


// 配置webpack的配置文件, 需要將配置的對(duì)象導(dǎo)出, 給webpack使用
module.exports = {
  // 入口 entry, 從哪個(gè)文件開(kāi)始打包
  entry: './src/main.js',

  // 出口 output, 打包到哪里去
  output: {
    // 打包輸出的目錄 (輸出的目錄必須是一個(gè)絕對(duì)路徑)
    path: path.join(__dirname, '../dist'),
    // 打包后生成的文件名
    filename: 'js/bundle.js'
  },

  // 配置module模塊加載規(guī)則
  // 默認(rèn), webpack只認(rèn)識(shí)json, javascript, 不認(rèn)識(shí)其他文件, 如果希望打包處理其他文件, 需要配置對(duì)應(yīng)loader
  module: {
    rules: [
      // (1) 配置css文件的解析
      {
        // 正則: 匹配所有以css結(jié)尾的文件
        test: /\.css$/,
        // 實(shí)際處理順序: 從右往左
        // css-loader 讓webpack能夠識(shí)別解析 css 文件
        // style-loader 通過(guò)動(dòng)態(tài)的創(chuàng)建style標(biāo)簽的方式(js), 讓解析后的css內(nèi)容, 能夠作用到頁(yè)面中
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, 
          'css-loader'
        ]
      },
      // (2) 配置less文件的解析
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, 
          'css-loader', 
          'less-loader'
        ]
      },
      // (3) 配置圖片文件的解析  i 表示忽視大小寫(xiě)  .PNG
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          // url-loader 如果不配置, 默認(rèn)都會(huì)將文件轉(zhuǎn)成base64字符串的格式
          {
            loader: 'url-loader',
            // 8k以?xún)?nèi), 轉(zhuǎn)成base64, 節(jié)約請(qǐng)求次數(shù), 8k以外, 單獨(dú)一個(gè)文件請(qǐng)求
            options: {
              limit: 8 * 1024,
              // 配置輸出的文件名
              name: '[name].[ext]',
              // 配置靜態(tài)資源的引用路徑
              publicPath: "../images/",
              // 配置輸出的文件目錄
              outputPath: "images/"
            }
          }
        ]
      },
      // (4) 配置新版本js文件的解析
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },

  // 配置插件
  plugins: [
    // 自動(dòng)生成 html 的插件
    new HtmlWebpackPlugin({ template: './public/index.html' }),

    // 分離css的插件, 定義打包好的文件的e存放路徑和文件名
    new MiniCssExtractPlugin({ 
      filename:'css/index.css'
    }),

    // 清除dist目錄的插件
    new CleanWebpackPlugin()
  ]
}

webpack.dev.js

// 存放開(kāi)發(fā)模式下的配置 development
const base = require('./webpack.base.js')
// 用于合并webpack配置的插件
const merge = require('webpack-merge')

// merge 可以接受多個(gè)參數(shù), 把參數(shù)對(duì)象合并成一個(gè)對(duì)象
// 后面的對(duì)象屬性, 會(huì)覆蓋前面的對(duì)象屬性
module.exports = merge(base, {
  // 配置開(kāi)發(fā)服務(wù)器
  devServer: {
    port: 3000, // 端口號(hào)
    open: true // 自動(dòng)打開(kāi)瀏覽器
  },
  mode: 'development'
})

webpack.pro.js

// 存放生產(chǎn)模式的配置 production
const base = require('./webpack.base.js')
// 用于合并webpack配置的插件
const merge = require('webpack-merge')

// merge 可以接受多個(gè)參數(shù), 把參數(shù)對(duì)象合并成一個(gè)對(duì)象
// 后面的對(duì)象屬性, 會(huì)覆蓋前面的對(duì)象屬性
module.exports = merge(base, {
  mode: 'production' // 聲明當(dāng)前是生產(chǎn)環(huán)境
})

注意： 拆分完webpack.config.js后可以把該文件刪除了。

修改scripts啟動(dòng)命令，注意指定配置文件的路徑變化

package.json

{
  "scripts": {
    "build": "webpack --config config/webpack.pro.js",
    "dev": "webpack-dev-server --config config/webpack.dev.js"
  },
}

多入口多出口

多入口需要修改entry配置，在這之前我們都是把src/main.js打包成dist/bundle.js引入到項(xiàng)目中，那如果有多個(gè)main.js類(lèi)型的文件需要引入呢？就需要配置多入口

- webpack-demo
  - src
    - index.js
    - about.js

注意： index.js和about.js沒(méi)有任何關(guān)系，都是獨(dú)立的不相互引用。

src/index.js

var element = document.createElement("span");
element.innerHTML =  `hello`;
document.body.appendChild(element);

src/about.js

var element = document.createElement("div");
element.innerHTML =  `about`;
document.body.appendChild(element);

config/webpack.base.js

// 其他代碼

module.exports = {
    // 用對(duì)象的方式配置多個(gè)入口
    entry: {
        index: "./src/index.js",
        about: "./src/about.js"
    },
    output: {
        // 修改輸出路徑和文件名，[name]是動(dòng)態(tài)的，讀取entry的屬性
       path: path.join(__dirname, "../dist"),
        filename: "js/[name].bundle.js"
    },
    
    // 其他代碼
}

我們執(zhí)行npm run build命令，可以看到 dist 的結(jié)構(gòu)如下

- webpack-demo
  - dist
    - js
      - index.bundle.js
      - about.bundle.js
    - index.html

提取公共模塊

當(dāng)在 index 和 about 這兩個(gè)獨(dú)立入口文件中, 如果引入了相同的模塊, 這些模塊會(huì)被重復(fù)打包, 我們需要提取公共模塊!

將 jquery 庫(kù)分別引入到 index.js 和 about.js 中。

const $ = require('jquery')

執(zhí)行構(gòu)建命令

yarn build

查看打包后的 about.bundle.js 和 index.bundle.js 文件源碼，會(huì)發(fā)現(xiàn)它們都把 jquery.js 打包進(jìn)去了，這樣做的后果不敢想象。所以我們需要把類(lèi)似公共的依賴(lài)模塊提取到一個(gè)單獨(dú)的文件中。

config/webpack.base.js

// 其他代碼

module.exports = {
    // 其他代碼
    // + 提取公共模塊配置
    optimization: {
        splitChunks: {
            chunks: 'all' // 提取所有文件的共同模塊
        }
    }
}

再次執(zhí)行打包

yarn build

可以看到當(dāng)前項(xiàng)目的公共模塊 jquery 的內(nèi)容已經(jīng)被打包到一個(gè) 獨(dú)立的 about~index.bundle.js文件中了，當(dāng)然這個(gè)文件名可以通過(guò)配置(https://webpack.docschina.org/plugins/split-chunks-plugin/#splitchunks-name)修改的。

注意： 公共模塊的大小必須大于 30kb才會(huì)被獨(dú)立打包，jquery 的大小是 87kB。

webpack處理vue

安裝 vue

yarn add vue

vue單文件組件

single-file components(單文件組件) ，文件擴(kuò)展名為 .vue 的文件，需要安裝vetur插件

單文件組件文檔(https://cn.vuejs.org/v2/guide/single-file-components.html)

單文件組件的結(jié)構(gòu)說(shuō)明

<template>
  <div>
    <h1>這是單文件組件的模板內(nèi)容</h1>
  </div>
</template>

<script>
// 這是組件的js代碼
export default {
  data () {
    return {
      msg: 'hello vue'
    }
  }
}
</script>

<style>
/* 這是單文件組件的樣式 */
h1 {
  color: red;
}
</style>

vue-loader的配置

Vue Loader 是一個(gè) webpack(https://webpack.js.org/) 的 loader，它允許你以一種名為單文件組件(https://vue-loader.vuejs.org/zh/spec.html)的格式撰寫(xiě) Vue 組件：

安裝依賴(lài)包

yarn add vue-loader vue-template-compiler  -D

webpack配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它規(guī)則
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 請(qǐng)確保引入這個(gè)插件！
    new VueLoaderPlugin()
  ]
}

提供App.vue組件

<template>
  <div>我是app</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

編寫(xiě)入口文件main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  // render函數(shù)用于渲染一個(gè)組件作為根組件（固定寫(xiě)法）
  render (createElement) {
    // 把App組件作為根組件
    return createElement(App)
  }
})

webpack項(xiàng)目中路由的配置

基本步驟

新建views文件夾，存放Home.vue組件和Login.vue組件
安裝vue-router

yarn add vue-router

創(chuàng)建路由實(shí)例

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import Home from './components/Home.vue'
import Login from './components/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login }
  ]
})

new Vue({
  el: '#app',
  // render函數(shù)用于渲染一個(gè)組件作為根組件（固定寫(xiě)法）
  render (createElement) {
    // 把App組件作為根組件
    return createElement(App)
  },
  router
})

抽取路由代碼

把路由功能從main.js中抽取出來(lái)

新建router/index.js文件

// 配置所有的路由的功能
// 模塊化環(huán)境開(kāi)發(fā)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

export default router

修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  el: '#app',
  // render函數(shù)用于渲染一個(gè)組件作為根組件（固定寫(xiě)法）
  render (createElement) {
    // 把App組件作為根組件
    return createElement(App)
  },
  router
})

vue-cli 腳手架環(huán)境

通過(guò)學(xué)習(xí)webpack的配置, 我們更深入的理解了腳手架里面的一些配置原理,

下面會(huì)介紹一下, 腳手架中移動(dòng)端的rem配置和反向代理配置, 這些都是實(shí)際工作中常用的

先通過(guò)腳手架創(chuàng)建項(xiàng)目

vue create vue-mobile

在項(xiàng)目根目錄新建 vue.config.js進(jìn)行配置, 這個(gè)vue.config.js 會(huì)覆蓋默認(rèn)cli的webpack配置, 非常方便

module.exports = {
  devServer: {
    port: 3000,
    open: true
  }
}

運(yùn)行項(xiàng)目

yarn serve

rem 布局 - 插件 postcss-pxtorem的配置

https://www.cnblogs.com/lml2017/p/9953429.html

安裝插件
```
yarn add lib-flexible postcss-px2rem
```
在 public 中的 index.html 中刪除 meta 標(biāo)簽
flexible會(huì)為頁(yè)面根據(jù)屏幕自動(dòng)添加<meta name='viewport' >標(biāo)簽，動(dòng)態(tài)控制initial-scale，maximum-scale，minimum-scale等屬性的值。

在 src / main.js 中導(dǎo)入插件包

// 導(dǎo)入 rem 的 js, 動(dòng)態(tài)的設(shè)置了, 不同屏幕的html根元素的 font-size
import 'lib-flexible'

配置 vue.config.js

module.exports = {
  devServer: {
    port: 3000,
    open: true
  },
  // rem 的配置
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            // 適配 375 屏幕, 設(shè)計(jì)圖750中量出來(lái)的尺寸要 / 2
            // 配置成 37.5 是為了兼容 沒(méi)有適配 rem 布局的第三方 ui 庫(kù)
            remUnit: 37.5
          })
        ]
      }
    }
  }
}

反向代理的配置說(shuō)明

webpack的反向代理, 可以起一個(gè)臨時(shí)的代理服務(wù)器, 幫助解決在開(kāi)發(fā)過(guò)程中的跨域問(wèn)題, 就算跨域了也能拿到后臺(tái)的數(shù)據(jù)

安裝 axios, 發(fā)送ajax請(qǐng)求

yarn add axios

發(fā)送請(qǐng)求

import axios from 'axios'
export default {
  async created () {
    const url = `/music/getmv_by_tag?g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=GB2312&notice=0&platform=yqq.json&needNewCode=0&cmd=shoubo&lan=all`
    
    const res = await axios.get(url)
    console.log(res)
  }
}

配置代理 (配置vue.config.js文件)

module.exports = {
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/music': {
        target: 'https://c.y.qq.com/mv/fcgi-bin/',
        pathRewrite: { '^/music': '' }
      }
    }
  },
  // rem 的配置
  // ....
}

https://gitee.com/maomincoding/webpack-vuecli

?（非軟文）Webpack從入門(mén)到實(shí)戰(zhàn)搭建Vue腳手架（一萬(wàn)字總結(jié)）

webpack 概述

webpack 能做什么

webpack 的基本使用

webpack基本打包配置

基于 webpack 實(shí)現(xiàn)隔行變色

自動(dòng)生成html - html-webpack-plugin插件

webpack - loaders 的配置

webpack中處理 css 文件

分離 css 文件

webpack 中處理 less 文件

webpack 中處理圖片 - url-loader

清除dist目錄的插件

配置圖片的打包輸出目錄

webpack開(kāi)發(fā)服務(wù)器

webpack 使用 babel 處理高版本的 js 語(yǔ)法

webpack-dev-server自動(dòng)刷新

生產(chǎn)環(huán)境 和 開(kāi)發(fā)環(huán)境

配置文件

多入口多出口

提取公共模塊

webpack處理vue

安裝 vue

vue單文件組件

vue-loader的配置

webpack項(xiàng)目中路由的配置

基本步驟

抽取路由代碼

vue-cli 腳手架環(huán)境

rem 布局 - 插件 postcss-pxtorem的配置

反向代理的配置說(shuō)明

生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境