什么是 webpack

是前端的一個項目構建工具，他是基于 Node.js 開發(fā)出來的一個前端工具

如何完美實現(xiàn)上述的兩種解決方案

使用 Gulp 基于流的自動化構建工具，小巧靈活，適合功能點的開發(fā)
使用 Webpack 適合與整個項目的構建

webpack 安裝的兩種方式

運行 npm i webpack -g 全局安裝 webpack，這樣就能在全局中使用 webpack 的命令
在項目根目錄中運行 npm i webpack --save-dev 安裝到項目依賴中

配置

1.現(xiàn)在先要裝 JQuery

npm init -y // 用來初始化生成一個新的 package.json 文件。會問很多配置修改問題，如果不改，一路回車。-y ( yes )表示跳過提問階段
npm i jquery -s // install 命令可以使用不同參數(shù)，指定所安裝的模塊屬于哪一種性質的依賴關系，即出現(xiàn)在 packages.json 文件的哪一項當中。-s( -save )模塊名被添加到 dependencies

2.導包時候的問題
我們不要在 <head> 標簽中導入任何包和 CSS ，會拖慢渲染速度，應該在 main.js 當中加載
webpack .\src\main.js .\dist\bundle.js: webpack 處理main.js 生成 bundle.js(一個瀏覽器能夠正常解析執(zhí)行的 js 文件)
我們在 main.js 中import $ from 'jquery'; 和 const = require('jquery') 都不行，所以，現(xiàn)在想要利用 webpack 解決這個問題：

`webpack` 能夠做什么事情?

正常的 js 文件不能引用其他的 js 文件

webpack 能夠處理 JS 文件的互相依賴關系
webpack 能夠處理 JS 的兼容問題，將高級的瀏覽器所不能識別的語法，轉換為瀏覽器所能識別的語法

修改代碼 `main.js` 以后怎么辦？

重新輸正常代碼打包很麻煩，所以我們配置 webpack 的配置文件：

在項目的根目錄創(chuàng)建文件 webpack.config.js
在該文件中像這樣配置

/* jshint esversion: 6 */
// 這個配置文件，其實就是一個 JS 文件，通過 Node 中的模塊操作，向外暴露了一個配置對象
const path = require("path");
module.exports = {
  // 手動指定入口和出口
  entry: path.join(__dirname, "./src/main.js"), // 表示要使用 webpack 打包哪個文件
  output: {
    path: path.join(__dirname, "./dist"), // 指定打包好的文件，輸出到哪個目錄中
    filename: "bundle.js" // 指定輸出的文件名稱
  }
};

配置以后 webpack 命令發(fā)生了什么？

首先， webpack 發(fā)現(xiàn)我們并沒有指定入口和出口，他就會去項目的根目錄去查找是否有 webpack.config.js 配置文件

當找到配置文件后，解析執(zhí)行該文件，當解析執(zhí)行文件后，就得到了配置中所導出的配置對象后，就拿到了配置對象中指定的入口和出料口，然后進行打包構建

現(xiàn)在的話每次改動后輸入 webpack 即可打包，但是就算這樣每次也都要改，很麻煩

使用 webpack-dev-server 這個工具，來實現(xiàn)自動打包編譯的功能

運行 npm i webpack-dev-server -D (模塊名將被添加到 devDependencies ),安裝這個工具到項目的本地開發(fā)依賴
安裝完畢后，這個工具的用法和 webpack 的使用方法完全一樣
由于是在項目中本地安裝的這個工具，所以無法把它當做腳本命令在 powershell 終端中直接運行(只有那些全局安裝的才能在終端中正常執(zhí)行)
注意 webpack-dev-server 如果想要正常運行，要求，在本地項目中，必須安裝 webpack
注意，即使是全局安裝了 webpack 我們也要將它們安裝進項目依賴當中
頁面中的 (利用 webpack 生成的) bundle.js 放置在我們的 dist 文件夾中，但是 webpack-dev-server 生成的 bundle.js 托管在我們電腦的內存中（并沒有存放在實際的物理磁盤上），所以要注意我們引用的 bundle.js 在項目的根目錄 /bundle.js （是找不到的）[ 放在內存中比較快嘛 ]
--hot 可以實現(xiàn)瀏覽器的無刷新重載，異步刷新

即使這樣配置 contentBase 指令的過程也很麻煩，需要指定啟動的目錄，而且還要修改 index.html 和 script 標簽的 src 屬性，所以推薦使用 html-webpack-plugin 插件配置啟動頁面

運行 npm i html-webpack-plugin --save-dev 安裝到以來開發(fā)
修改 webpack.config.js 配置文件：

const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // 手動指定入口和出口
  entry: path.join(__dirname, "./src/main.js"), // 表示要使用 webpack 打包哪個文件
  output: {
    path: path.join(__dirname, "./dist"), // 指定打包好的文件，輸出到哪個目錄中
    filename: "bundle.js" // 指定輸出的文件名稱
  },
  plugins: [
    // 配置插件的節(jié)點
    // 3
    new webpack.HotModuleReplacementPlugin(), // new 一個熱更新的模塊對象
    new htmlWebpackPlugin({
      // 創(chuàng)建一個內存中生成 html 的插件
      template: path.join(__dirname, "./src/index.html"), //會根據(jù)指定的模板頁面，生成的內存中頁面’
      filename: "index.html"
    })
  ]
};

這個插件的兩個功能 1.自動在內存中模板指定頁面生成一個內存中的頁面 2.自動把打包好的 bundle.js 追加到頁面中去

`webpack` 打包 `css` 文件

webpack 只能打包 JS 類型的文件，如果想要打包非 JS 類型的文件需要安裝， npm i css-loader style-loader -D
打開 webpack.config.js 新增一個配置節(jié)點，叫做 module（一個對象），在對象上，有個 rules 屬性，是個數(shù)組；這個數(shù)組中存放了所有第三方文件的匹配和處理規(guī)則。
如圖

module: {
  // 這個節(jié)點用于配置所有的第三方模塊加載器
  // 規(guī)則 --- css
  rules: [
    // 配置處理 .css 文件的第三方 loader 模塊,調用順序從右到左
    { test: /\.css$/, use: ["style-loader", "css-loader"] }
  ];
}

`webpack` 無法處理 `URL`，解決方法和上面一樣

注：一些依賴關系，忘了也沒關系,這幾個都是內部依賴，不需要寫到 webpack.config.js 當中

less-loader ---> less
url-loader ---> file-loader
sass-loader ---> node-sass

如何配置使得圖片不會轉成 `base64` (為什么？ --> 我在提問)

在 url-loader 的配置中添加一句

{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=200,000'}

limit 給定的值是圖片的大小，單位是比特，如果我們引用的圖片大于或者等于給定 limit 的值就不會轉為 base64 格式的字符串。

Q 為什么圖片的名字會被改掉

A 防止重名，url 中的 '/' 問題

如果就是不想改名字的話

{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=200,000&name=[name].[ext]'}
<!-- [name]保持原來的名字，[ext]保持原來的格式 -->

但是我也還想要 hash

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

`Unexpected token / in JSON at position 113 while parsing near`

json 文件不能寫注釋

'webpack-dev-server' 不是內部或者外部命令，也不是可運行的程序

--> 你沒裝
--> 配置文件明明說你裝了 -> -> 我不是，我不是，我沒有，就還是沒裝（沒了配置，但是配置文件還有記錄）

解決 `webpack` 默認無法處理 `ES6` 新特性 `class static`

webpack 只能默認處理一部分 ES6 的新語法，一些更加高級的 ES6 語法或者 ES7 語法， webpack 是處理不了的，這時候就需要借助第三方的 loader 來幫助 webpack 處理這些高級的語法，當?shù)谌?loader 把高級語法轉為低級語法以后，會把結果交給 webpack 去打包到 bundle.js 中

通過 babel ，可以幫我們將高級的語法轉換為低級的語法

安裝

我們可以在 webpack 中運行如下兩套包，全裝 babel 相關的 loader 功能

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

配置

打開 webpack 的配置文件，在 module 節(jié)點下的 rule 數(shù)組中，添加一個新的匹配規(guī)則：

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ }
// 配置 babel 的規(guī)則時，必須把 node_modules 選項排除掉
// 1.如果不排除的話，則 babel 會把 node_modules 中的所有第三方JS文件都打包翻譯，會非常消耗 CPU ，且非常慢
// 2.哪怕硬鋼都轉換了，項目也無法正常運行

在根目錄地下，新建 `.babelrc`

新建 .babelrc 的 Babel 配置文件，這是個 JSON 文件（必須符合 JSON 語法）

如下配置

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

如何解決 `eslint-label` 找不到問題

將 eslint 和 eslint-label 裝一起：
npm i eslint eslint-label -D

`webpack` 和 `Vue`

在 webpack 中安裝 Vue: npm i vue -S

但是這種 Vue 不能支持我們直接像普通網(wǎng)頁一樣使用

import Vue from "Vue";

在包的查找過程中：

在項目根目錄中有沒有 node_modules 的文件夾
根據(jù)包名，找對應的文件夾
在 Vue 的文件夾中，找一個 package.json 的包配置文件
在 package.json 文件夾中，查找一個 main 屬性【 main 屬性指定了這個包在被加載的時候的入口文件】
- "main": "dist/vue.runtime.common.js" // 這個文件暴露一個實例供我們使用,是 Vue.js 的閹割版
- 以往那樣我們用的是 "main": "dist/vue.js"

解決方案

直接將上述的配置修改成 "main": "dist/vue.js" 不大好
import Vue from '../node_modules/vue/dist/vue.js'
也可以在 webpack.config.js 中的添加

// 和 modules 平級
  resolve: {
  alias: { // 設置 vue 被導入包的時候的配置
    'vue$': 'vue/dist/vue.js'
  }
},

在 `vue` 的 `runtime-only` 中如何渲染一個組件？

只能夠使用 render 函數(shù)
在 src 文件夾底下定義一個 login.vue 文件
- .vue 文件有三個部分 template script style
在 main.js 中導入 login 組件 import login from './login.vue'
.vue 創(chuàng)造出來的文件，webpack 默認不識別，又要裝第三方 loader: npm i vue-loader vue-template-compiler -D
- 這里面 vue-loader 的版本若為 15 則需要安裝插件 VueLoaderPlugin ，不然就不用了。
再去 webpack.config.js 去配置一下
然后在 render 調用寫好的 login 模板

.`vue` 文件中的 `data` 和 `method` 等屬性

在 ES6 中，也通過規(guī)范的形式，規(guī)定了 ES6 中如何導入和導出模塊:

ES6 中導入模塊使用 import '模塊名稱' from '表示路徑'
ES6 中導出模塊使用 export default 和 export 向外暴露成員
- export default 暴露出來的對象可以用任意對象名稱接受 import hah from '...'
- 在一個模塊中，一個 export default 只允許暴露一次，而 'export' 可以暴露多次
- export: export var title = '小星星' ，在一個模塊中，允許 export default 和 export 同時使用向外暴露成員，
- export 接受成員 import { title } from '...' ，注意變量名必須要一致，但是也可以像 import { title as title123} from '...' 為 title 起別名。這種形式為【按需導出】，我們可以拿我們需要的變量

export default {
  data() {
    return {
      msg: "123"
    }; // 組件中的 data 必須是個 function
  },
  methods: {
    show() {
      console.log("調用了 login.vue 中的  show 方法");
    }
  }
};

webpack 和 vue-router

安裝 npm i vue-router -s
import VueRouter from 'vue-router'; 注意要先導入 Vue
手動安裝 VueRouter：Vue.use(VueRouter);
創(chuàng)建路由對象....

但是我們如何顯示組件呢？

如果像往常一樣將 router-view 和 router-link 寫到 el 所控制的元素中的話，會被 render 沖掉,所以我們寫到 render 所加載的模板中去

webpack 和 vue 和 css

<style scoped> 可以在指定作用域
普通的 style 標簽只支持普通的樣式，如果想要啟用 less 或者 scss 需要設置 lang 屬性 <style lang="scss" scoped>
只要 style 標簽是在組件中定義的，推薦都為 style 標簽開啟 scoped 屬性

最好將路由模塊抽離

初識 `Mint-UI`

MUI 不同于 MInt-UI， MUI 只是開發(fā)出來的一套好用的代碼片段，里面提供了配套的樣式、配套的 HTML ；而 Mint-UI ，是真正的組件庫，是使用 Vue 技術封裝出來的成套的組件，可以無縫的和 Vue 項目驚醒集成開發(fā)
因此， MUI 和 Bootstrap 感覺上類似，但是 Mint-UI 只適用于 Vue 項目

安裝與配置，點擊這里查看文檔

安裝：`npm i mint-ui -s`

導入所有的 mint-ui 組件

import MintUI from "mint-ui";
import "mint-ui/lib/style.css";
Vue.use(MintUI);

按需導入

借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D
然后，將 .babelrc 修改為：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

// 按需導入 mint-ui 組件
import { Button } from 'mint-ui';
// 使用 Vue.component 注冊按鈕組件
Vue.component(Button.name, Button);

使用

CSS component 導入后就可以使用
JS component 則是還是需要按需引用

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

Vue webpack搭建項目

Vue webpack搭建項目

什么是 webpack

如何完美實現(xiàn)上述的兩種解決方案

webpack 安裝的兩種方式

配置

`webpack` 能夠做什么事情?

修改代碼 `main.js` 以后怎么辦？

配置以后 `webpack` 命令發(fā)生了什么？

`webpack` 打包 `css` 文件

`webpack` 無法處理 `URL`，解決方法和上面一樣

如何配置使得圖片不會轉成 `base64` (為什么？ --> 我在提問)

`Unexpected token / in JSON at position 113 while parsing near`

'webpack-dev-server' 不是內部或者外部命令，也不是可運行的程序

解決 `webpack` 默認無法處理 `ES6` 新特性 `class static`

安裝

配置

在根目錄地下，新建 `.babelrc`

如何解決 `eslint-label` 找不到問題

`webpack` 和 `Vue`

解決方案

在 `vue` 的 `runtime-only` 中如何渲染一個組件？

.`vue` 文件中的 `data` 和 `method` 等屬性

webpack 和 vue-router

但是我們如何顯示組件呢？

webpack 和 vue 和 css

`<style scoped>` 可以在指定作用域

最好將路由模塊抽離

初識 `Mint-UI`

安裝與配置，點擊這里查看文檔

安裝：`npm i mint-ui -s`

導入所有的 mint-ui 組件

按需導入

使用

相關閱讀更多精彩內容

友情鏈接更多精彩內容

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

Vue webpack搭建項目

什么是 webpack

如何完美實現(xiàn)上述的兩種解決方案

webpack 安裝的兩種方式

配置

webpack 能夠做什么事情?

修改代碼 main.js 以后怎么辦？

配置以后 webpack 命令發(fā)生了什么？

webpack 打包 css 文件

webpack 無法處理 URL，解決方法和上面一樣

如何配置使得圖片不會轉成 base64 (為什么？ --> 我在提問)

Unexpected token / in JSON at position 113 while parsing near

'webpack-dev-server' 不是內部或者外部命令，也不是可運行的程序

解決 webpack 默認無法處理 ES6 新特性 class static

安裝

配置

在根目錄地下，新建 .babelrc

如何解決 eslint-label 找不到問題

webpack 和 Vue

解決方案

在 vue 的 runtime-only 中如何渲染一個組件？

.vue 文件中的 data 和 method 等屬性

webpack 和 vue-router

但是我們如何顯示組件呢？

webpack 和 vue 和 css

<style scoped> 可以在指定作用域

最好將路由模塊抽離

初識 Mint-UI

安裝與配置，點擊這里查看文檔

安裝：npm i mint-ui -s

導入所有的 mint-ui 組件

按需導入

使用

相關閱讀更多精彩內容

友情鏈接更多精彩內容

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

`webpack` 能夠做什么事情?

修改代碼 `main.js` 以后怎么辦？

配置以后 `webpack` 命令發(fā)生了什么？

`webpack` 打包 `css` 文件

`webpack` 無法處理 `URL`，解決方法和上面一樣

如何配置使得圖片不會轉成 `base64` (為什么？ --> 我在提問)

`Unexpected token / in JSON at position 113 while parsing near`

'webpack-dev-server' 不是內部或者外部命令，也不是可運行的程序

解決 `webpack` 默認無法處理 `ES6` 新特性 `class static`

在根目錄地下，新建 `.babelrc`

如何解決 `eslint-label` 找不到問題

`webpack` 和 `Vue`

在 `vue` 的 `runtime-only` 中如何渲染一個組件？

.`vue` 文件中的 `data` 和 `method` 等屬性

但是我們如何顯示組件呢？

`<style scoped>` 可以在指定作用域

初識 `Mint-UI`

安裝與配置，點擊這里查看文檔

安裝：`npm i mint-ui -s`