什么是 webpack

是前端的一個(gè)項(xiàng)目構(gòu)建工具，他是基于 Node.js 開發(fā)出來的一個(gè)前端工具

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

使用 Gulp 基于流的自動(dòng)化構(gòu)建工具，小巧靈活，適合功能點(diǎn)的開發(fā)
使用 Webpack 適合與整個(gè)項(xiàng)目的構(gòu)建

webpack 安裝的兩種方式

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

配置

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

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

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

`webpack` 能夠做什么事情?

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

webpack 能夠處理 JS 文件的互相依賴關(guān)系
webpack 能夠處理 JS 的兼容問題，將高級(jí)的瀏覽器所不能識(shí)別的語法，轉(zhuǎn)換為瀏覽器所能識(shí)別的語法

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

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

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

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

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

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

當(dāng)找到配置文件后，解析執(zhí)行該文件，當(dāng)解析執(zhí)行文件后，就得到了配置中所導(dǎo)出的配置對(duì)象后，就拿到了配置對(duì)象中指定的入口和出料口，然后進(jìn)行打包構(gòu)建

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

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

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

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

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

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

這個(gè)插件的兩個(gè)功能 1.自動(dòng)在內(nèi)存中模板指定頁(yè)面生成一個(gè)內(nèi)存中的頁(yè)面 2.自動(dòng)把打包好的 bundle.js 追加到頁(yè)面中去

`webpack` 打包 `css` 文件

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

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

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

注：一些依賴關(guān)系，忘了也沒關(guān)系,這幾個(gè)都是內(nèi)部依賴，不需要寫到 webpack.config.js 當(dāng)中

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

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

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

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

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

Q 為什么圖片的名字會(huì)被改掉

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' 不是內(nèi)部或者外部命令，也不是可運(yùn)行的程序

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

解決 `webpack` 默認(rèn)無法處理 `ES6` 新特性 `class static`

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

通過 babel ，可以幫我們將高級(jí)的語法轉(zhuǎn)換為低級(jí)的語法

安裝

我們可以在 webpack 中運(yùn)行如下兩套包，全裝 babel 相關(guān)的 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é)點(diǎn)下的 rule 數(shù)組中，添加一個(gè)新的匹配規(guī)則：

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

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

新建 .babelrc 的 Babel 配置文件，這是個(gè) 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)頁(yè)一樣使用

import Vue from "Vue";

在包的查找過程中：

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

解決方案

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

// 和 modules 平級(jí)
  resolve: {
  alias: { // 設(shè)置 vue 被導(dǎo)入包的時(shí)候的配置
    'vue$': 'vue/dist/vue.js'
  }
},

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

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

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

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

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

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

webpack 和 vue-router

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

但是我們?nèi)绾物@示組件呢？

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

webpack 和 vue 和 css

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

最好將路由模塊抽離

初識(shí) `Mint-UI`

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

安裝與配置，點(diǎn)擊這里查看文檔

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

導(dǎo)入所有的 mint-ui 組件

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

按需導(dǎo)入

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

首先，安裝 babel-plugin-component：

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

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

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

使用

CSS component 導(dǎo)入后就可以使用
JS component 則是還是需要按需引用

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

Vue webpack搭建項(xiàng)目

Vue webpack搭建項(xiàng)目

什么是 webpack

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

webpack 安裝的兩種方式

配置

`webpack` 能夠做什么事情?

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

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

`webpack` 打包 `css` 文件

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

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

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

'webpack-dev-server' 不是內(nèi)部或者外部命令，也不是可運(yùn)行的程序

解決 `webpack` 默認(rèn)無法處理 `ES6` 新特性 `class static`

安裝

配置

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

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

`webpack` 和 `Vue`

解決方案

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

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

webpack 和 vue-router

但是我們?nèi)绾物@示組件呢？

webpack 和 vue 和 css

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

最好將路由模塊抽離

初識(shí) `Mint-UI`

安裝與配置，點(diǎn)擊這里查看文檔

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

導(dǎo)入所有的 mint-ui 組件

按需導(dǎo)入

使用

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

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

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

Vue webpack搭建項(xiàng)目

什么是 webpack

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

webpack 安裝的兩種方式

配置

webpack 能夠做什么事情?

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

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

webpack 打包 css 文件

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

如何配置使得圖片不會(huì)轉(zhuǎn)成 base64 (為什么？ --> 我在提問)

Unexpected token / in JSON at position 113 while parsing near

'webpack-dev-server' 不是內(nèi)部或者外部命令，也不是可運(yùn)行的程序

解決 webpack 默認(rèn)無法處理 ES6 新特性 class static

安裝

配置

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

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

webpack 和 Vue

解決方案

在 vue 的 runtime-only 中如何渲染一個(gè)組件？

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

webpack 和 vue-router

但是我們?nèi)绾物@示組件呢？

webpack 和 vue 和 css

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

最好將路由模塊抽離

初識(shí) Mint-UI

安裝與配置，點(diǎn)擊這里查看文檔

安裝：npm i mint-ui -s

導(dǎo)入所有的 mint-ui 組件

按需導(dǎo)入

使用

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

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

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

`webpack` 能夠做什么事情?

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

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

`webpack` 打包 `css` 文件

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

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

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

解決 `webpack` 默認(rèn)無法處理 `ES6` 新特性 `class static`

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

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

`webpack` 和 `Vue`

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

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

但是我們?nèi)绾物@示組件呢？

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

初識(shí) `Mint-UI`

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