nrm使用webpack使用

時間 2019-11-17

標籤 nrm 使用 webpack 简体版

原文原文鏈接

npm -i nrm -g 安裝nrmcss

nrm ls 查看源地址html

nrm use npm 切換不一樣的源地址前端

npm i cnpm -g 安裝cnpmvue

js node

.js .jsx .coffee(中間語言) .ts(中間語言)須要編譯jquery

csswebpack

.css .sass(.scss) .lesses6

imagesweb

.jpg .png .gif .bmp .svgvue-router

字體文件fonts

.svg .ttf .eot .woff .woff2

模板文件

.ejs .jade .vue[這是在webpack 中定義組件的方式，推薦這麼用]

網頁中引入的靜態資源多了之後會有什麼問題

1.網頁加載速度慢，由於要發起不少的二次請求

2.要處理錯綜複雜的依賴關係

如何處理上述兩個問題

1.合併，壓縮，精靈兔，圖片的base64編碼

2.可使用以前學過的requireJS，也可使用webpack能夠解決各個包之間的複雜依賴關係；

什麼是webpack

前端的項目構建工具，他是基於node.js開發出來的一個前端工具

如何完美解決上述的2種解決方案

1.使用gulp,是基於taskr任務

2.webpack，是基於整個項目進行構建的。

藉助於webpack這個前端自動化構建工具，能夠完美實現資源的合併，打包，壓縮，混淆等諸多功能

根據官網的圖片介紹webpack打包的過程

3.webpack 安裝方式

npm i webpack -g 安裝webpack

// 因爲Es6 的代碼過高級了，瀏覽器解析不了，因此，這一行執行報錯

import $ from "jquery";

//const $=require('jquery')

webpack ./main.js ./dist/bundle.js

不能編譯的問題webpack 版本太高

1.webpack 可以處理js文件文件的相互依賴關係

2.webpack 處理js的兼容問題，吧高級的，瀏覽器不識別的轉爲低級的，瀏覽器可以識別的

剛纔運行的命令格式：webpack ./src/main.js -o ./dist/bundle.js --mode development

*****改代碼得從新打包，怎麼解決這個問題呢？

當咱們在命令行輸入npm run dev 1.首先發現咱們並無經過命令的形式，給他制定入口和出口2.webpack 就回去項目的根目錄找一個叫作webpack.config.js的配置問題件3.但找到配置文件後，webpack回去解析執行這個配置文件，當解析執行完配置文件後，就獲得了配置文件中，處處的配置對象4.當webpack拿到配置對象後，就拿到了配置對象中，制定的入口和出口，而後進行打包構建；

webpack-dev-sever 工具來實現自動打包編譯的功能

npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴2.安裝完畢後，這個工具的用法和webpack 命令的用法，徹底同樣

node nodemon

webpack webpack-dev-server

3.因爲，咱們是在項目中，本地安裝的webpack-dev-server,因此沒法把它當作腳本命令，在powershell 終端中直接運行；（只有那些安裝到全局-g的工具，才能在終端正常執行）

4.注意：webpack-dev-server這個工具，若是想要正常運行，要求在本地醒目中，必須安裝webpack

5.webpack-dev-server幫咱們打包生成的bundle,.js文件並無存放到實際的物理磁盤上而是直接託管到了電腦的內存中，因此咱們在項目根目錄中，根本找不到這個打包好的bundle.js

6.咱們能夠認爲，webpack-dev-server把打包好的文件，以一種虛擬的形式，託管到了咱麼項目的根目錄中，雖然咱們看不到它，可是，能夠認爲，和dist src node_moduels 評級，有一個看不見的文件，叫作bundle.js

html-webpack-plugin 內存中的頁面

js中引入css 注意webpack 默認只能打包處理js類型的文件，沒法處理其餘的非js 類型的文件；若是須要處理費js類型的文件咱們須要手動安裝一些合適的第三方loader加載器

loader 順序調用時從右調用。

當咱們在控制檯直接輸入webpack命令執行的時候，webpack作了一下幾步

1.首先，webpack發現咱們並無經過命令的形式給它制定入口和出口

2.webpack 就回去項目根目錄中，查找一個叫作webpack.config.js的配置文件

3.當找到配置文件後，webpack會去解析執行這個配置文件，當解析執行完配置文件後，就獲得了配置文件中，處處的配置對象

4.當webpack 那高配置對象後，就拿到了配置對象中，制定的入口和出口，而後進行打包構建

cnpm i less-loader -D .less文件引入報這個錯

cnpm i less -D

module: {

rules: [

{ test: /\.css$/, use: ["style-loader", "css-loader"] },

{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }

]

}

cnpm i sass-loader -D .sass 文件引入報錯

cnpm i node-sass -D

在內存中，根據制定的模板頁面，生成一根內存中的首頁，同事自動把打包好的bundle中注入到頁面底部

若是要配置插件，須要在處處的對象中，掛載一個plugins

package.json文件中

var htmlWebpackPlugin=require('html-webpack-plugin')

webpack.config.js 文件中

plugins: [

new webpack.HotModuleReplacementPlugin(),

new htmlWebpackPlugin({

template: path.join(__dirname, "./src/index.html"),

filename: "index.html"

})

urlloader

默認狀況下，webpack沒法處理css文件中的url地址，不論是圖片仍是字體庫，只要是url都處理不了

cnpm i url-loader file-loader -D

處理圖片轉爲base64 use: ["url-loader?limit=false&name=[name].[ext]"] 設置爲false 顯示路徑

limit 給定的值，是圖片的大小，單位是byte，若是咱們引用的圖片，大於或鄧毅給定的limit值，澤不會被轉爲base64格式的字符串，若是圖片小魚給定的limit值，澤會被轉爲base64的字符串，name=[name].[ext]保留文字的名字後綴名

[hash:8]-[name].[ext] 若是圖片名程同樣，打包的時候回出現同名的圖片只保留一張因此要加hash:8

{

test: /\.(jpg|png|gif|bmp|jpeg)$/,

use: ["url-loader?limit=false&name=[hash:8]-[name].[ext]"]

} /

處理字體

若是須要經過路徑的形式，去引入node_modules中的相關的文件，能夠直接省略路徑前面的node_modules這一層目錄，直接寫包的名稱，而後後面跟上具體的文件路徑

//不寫node_modules這一層目錄，默認就會去node_modules中查找

import 'bootstrap/dist/css/bootstrap.css'

{

test: /\.(ttf|eot|svg|woff|woff2)$/,

use: ["url-loader"]

}

webpack babel

class Person{

static info ={

name:'ddd',age:12

}}

es6 webpack

在webpack 中，默認只能處理一部分Es6的新語法，一些更高級的Es6或者ES7語法，webpack是處理不了的，這時候就須要藉助於第三方的loader來幫助webpack處理這些高級的語法，當第三方loader吧高級語法轉爲低級的語法以後，會把結果交給我webpack去打包到bundle.js

經過babel能夠幫咱們將高級語法轉換爲低級的語法。

1.在webpack中，能夠運行以下兩套命令安裝兩套包，去安裝babel相關的loader功能

{

test: /\.js$/,

use: ["babel-loader"]

}

第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

只轉換，不知道對應關係

第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D

語法能夠知道對應關係

2.打開webpack的配置文件，在module節點下的rules數組中，添加一個新的匹配規則：

{

test: /\.js$/,

use: "babel-loader",exclude:/node_modules/

}

注意：1.在配置babel的loader規則的時候，必須把node_modules目錄，經過exclude選項排除掉：緣由有兩：1.若是不排除node_modules，則babel會把node_modules中全部的第三方js文件，都打包編譯，這樣，會很是消耗CPU，同時打包速度很是慢2.哪怕最終，babel把全部node_modules中的js轉換完畢了，可是項目也沒法正常運行

3.在項目的根目錄中，新建一個叫作。babelrc的babel配置文件，這個配置文件，屬於json格式，因此在寫.babelrc配置的時候，必須符合json語法規範，不能寫註釋，字符串必須用上引號，

3在.babelrc寫以下的配置：{

"presets":["env","stage-0"],

"plugins":["transform-runtime"]

}

vue conponent 註冊的組件會在id下加入組件

render註冊的組件，會把id刪掉，替換

在webpack中使用Vue

在webpack 中，使用import Vue from 'vue' 導入的Vue 構造函數，功能不完整，只提供了runtime-only的方式，並無提供像網頁中那樣的使用方式

回顧包的查找規則：

1.找項目根目錄中有沒有node_modules的文件夾

2.在node_modules中根據報名，找對應的vue文件夾

3.在vue文件夾中，找一個叫作package.json的包配置文件

4.在package.json文件中，查找一個main屬性（main屬性制定了這個包在被夾在時候的入口文件）

若是vue要使用網頁引入1.能夠直接改package.json文件中的main入口，直接改成vue.js

2.給個路徑 import Vue from '../node_modules/vue/dist/vue.js'

3.webpack.config.js中配置

resolve:{

alias:{

"vue$":"vue/dist/vue.js"

}

默認webpack，沒法打包vue 文件，須要手動安裝相關的loader

cnpm i vue-loader vue-template-compiler -D

在配置文件中，新增，loader配置項

node中向外暴露成員的形式：

//module.exports={}

在Es6中，葉童過規範的形式，規定了如何導入和導出模塊

Es6中導入模塊，使用import 模塊名稱 from '模塊表示符' import '表示路徑'

在Es6中使用export default 或者export向外暴露成員export default 暴露出去引入的時候能夠隨便取名字，在一個模塊中，export default只容許向外暴露一次，在一個模塊中，可使用export default和export

使用export向外暴露的成員只能使用{}的形式接受 import {title} from "test.js",這種形式，叫作按需導出，export能夠向外暴露多個成員，同時，若是某些成員，咱們在import的時候，不須要，澤能夠再也不{}中定義，使用export導出的成員，必須用按個按照導出時候的名稱，來使用{}按需接收{title as t} 使用as取別名使用export導出的成員，若是就想換個名稱來接收，可使用as來取別名

//在Node中使用var 名稱=require('模塊標識符')

////module.exports 和exports

vue-router

render會把el指定的容器中，全部的內容都清空覆蓋，因此不要把路由的touter-view和router-link直接寫到el控制的容器中

App這個組件視同過VM失禮的render函數渲染出來的，render函數若是要渲染組件，只能放到el:'app'所指定的元素中，

//account 和goodsList組件，是經過路由監聽到的因此這兩個組件，只能展現到屬於路由的<router-view></router-view>中去

.vue <style scoped></style>

普通的style只支持普通的樣式，若是想要啓用scss或less須要爲style元素設置lang屬性

lang="scss"