国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack 大法好 ---- 基礎概念與配置(1)

QLQ / 981人閱讀

摘要:不信你命令行里敲個試試敲敲敲當然了想直接運行命令,你需要將添加到系統變量啊。全局安裝相同的,運行命令耐心等待安裝完成后,你的系統變量里就存在命令了,你可以運行下試試。上訴如果有不懂的,歡迎留言。

再一次見面!

Light 還是太太太懶了,距離上一篇沒啥營養的文章已經過去好多天。今天為大家介紹介紹 webpack 最基本的概念,以及簡單的配置,讓你能快速得搭建一個可用的 webpack 開發環境。

webpack的安裝

webpack 運行于 node 環境,node 的安裝在這就不贅述了。由于 Light 是基于 webpack2 為大家介紹的,因此 node 的版本盡量要新(文章本就是很基礎的東西,想必看文章的人也是剛接觸 webpack,粗暴點,直接去裝最新版)。至于 webpack 的安裝大體上可以分為兩種。一是安裝在項目目錄下,二是全局安裝。

項目下安裝

來,新建個文件夾,運行命令:

npm install webpack --save-dev

靜靜等待安裝完成(要是使用 npm 安裝緩慢或者失敗,可以使用 npm 鏡像 cnpm 代替,具體問度娘)。至此,你的項目下已經可以使用 webpack 了。不信?你命令行里敲個 webpack 試試!

.........敲敲敲.........

what fuck!command not found!

當然了!想直接運行 webpack 命令,你需要將 webpack 添加到系統變量啊。這就是馬上要說的 webpack 全局安裝了。

全局安裝

相同的,運行命令:

npm install webpack -g

..........耐心等待........

安裝完成后,你的系統變量里就存在 webpack 命令了,你可以運行下試試。

.........敲敲敲.........

what fuck again!又是錯誤提示!

No configuration file found and no output filename configured via CLI option.
A configuration file could be named "webpack.config.js" in the current directory.

四級都過了吧!意思是說你沒有配置文件啊!是的,webpack 運行時候,會第一時間去找當前目錄下屬于它的配置文件,我們要是啥都不給它,它也不懂怎么輸出文件啊。

最最最簡單的配置

不跟你客套了,直接上代碼:

var path = require("path");
module.exports = {
  entry: {
    index:"./src/index.js",
  },
  output: {
    //path 是 nodeJS 的一個基礎模塊,這里用來獲取絕對路徑
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
}

對了,配置信息請寫在項目目錄下的 webpack.config.js 文件里,這是 webpack 默認狀態下使用的配置文件。
好了,看代碼,顧名思義, entry 選項的意思就是入口文件!作用就是告訴 webpack ,我這整個項目就是從這個 index.js 文件開始的,你也從這個文件進來看我都寫了什么高大上的代碼。大家都知道, webpack 是用來打包的,那既然有 entry 入口,便也有 output 出口了。以上關于 output 的配置是告訴 webpack,把打包好的文件放在 當前目錄下的 dist 文件夾里,而且文件名叫做 bundle.js 。
此時你去命令行里敲下 webpack ,是不是發現項目目錄下多了一個 dist 文件夾?是的話,那么恭喜你,你已經成功得使用 webpack 打包了你的項目。
到此,你應該已經大致理解了 webpack 的運行方式,它通過配置讀取了入口文件,然后根據入口文件的代碼,調用你項目中運用到的依賴模塊,并最終將所有的模塊打包并輸出出來。簡單的原理理解就是這樣,可是這還是皮毛啊,你要不是看 Light 的文章,去看別人的教程,或者官方文檔,我相信這些你三四分鐘就掌握了。

webpack 是根據你提供的代碼去搞一些事情,也就是說,它只看得懂你寫的 js 啊。它并不懂你寫的 css、scss、ts...等等非 JS 文件,然而 webpack 很誠懇得把每個文件都作為模塊,你要是用到了,它就會幫你去打包,至于對錯,它真的不 care 。
那么其他的非 JS 文件,webpack 要怎么去解析呢?接下來就是 webpack 的另一個重要概念:Loaders。

Loaders 加載器

Loader--加載器,既然叫這個名字,能干嘛還不知道么?加載文件時候都要經過它的層層把關,換句話說,它就是幫 webpack 看門的。項目中你可能用到各種各樣的模塊,各種各樣的文件,每一個文件都會經過這個 Loader,而它會根據你提供的配置,根據要加載的文件后綴,調用相關的加載器去加載文件。接下來舉一個栗子,如何在你的項目中使用 ES6 。

關注前端發展的同學都知曉,ES6 作為新一代的 js 標準,越來越受到開發者們的關注,也越來越多的人使用 ES6 去開發項目。然而,理想很豐滿,瀏覽器兼容這個現實難題也相當飽滿。市場上的瀏覽器大佬們,并非都完美支持 ES6 ,也就是說你拿 ES6 的代碼是交不了差的??墒菚r代潮流不能被這些大佬給克制住了啊,于是,萬能的社區為我們提供了 Babel 這一神器。它可以將 ES6 語法轉化為 ES5 ,從而解決我們的后顧之憂,可以大膽得使用 ES6。
關于 ES6 的介紹,推薦大家去看阮一峰老師的ECMAScript 6 入門,對于剛接觸的人來說是很有幫助的。

webpack里,如何使用 ES6?答案就是 Loader。
首先安裝 babel:

npm install --save-dev babel-loader babel-core babel-preset-es2015

接著就是去告訴 webpack ,你有 Loader 的。還是 webpack.config.js 。

var path = require("path");
module.exports = {
  entry: {
    index:"./src/index.js",
  },
  output: {
    //path 是 nodeJS 的一個基礎模塊,這里用來獲取絕對路徑
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { 
        test: /.js$/,
        exclude: /node_modules/,
        loader: "babel-loader" 
      }
    ]
  }
}

通過以上配置,當 webpack 中需要打包 JS 文件時,就會去調用 babel-loader 來進行解析(webpack1 的時候可以寫 loader: "babel",2.0的版本開始,必須寫 "babel-loader")。從而,你用 ES6 語法來寫,輸出的文件會被轉為 ES5。當然,想要正確使用 babel,你還需要對 babel 進行配置。很簡單,在項目目錄下新建一個 .babelrc 文件,里頭寫 JSON 格式的配置信息。

{
  "presets": ["es2015"]
}

除了 JS 文件,其他文件類型,例如 css、scss、jpg、ts、vue......等等,都有相應的 Loader 。需要用的時候就配置相應的加載器即可。前端是個五彩繽紛的世界,生存的王道就是要學會適應變化。下面就簡單列舉一些常用 Loader。

loaders: [
  { 
    test: /.js$/,
    exclude: /node_modules/,
    loader: "babel-loader" 
  },
  {
    test: /.css$/, 
    loader: "style-loader!css-loader!postcss-loader"
  },{
    test: /.(png|jpg|gif|svg)$/,
    loader: "url-loader?limit=2048"
  }
]

上訴如果有不懂的,歡迎留言。介紹完 Loaders ,接下來介紹 webpack 另外一個重要概念:Plugins

Plugins 插件

plugin的目的其實就是填補 loader 的不足。當然,它也是 webpack 功能可配置化的基礎。先看代碼:

  plugins:[
    //代碼壓縮
    new webpack.optimize.UglifyJsPlugin({
      compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true
      }
    })
  ]

這里我們使用了 webpack 自帶的代碼壓縮插件??梢宰⒁獾?,由于可以給插件傳入參數,因此插件的調用需要用 new 來聲明。此時運行 webpack,最終打包出來的代碼是壓縮好的。Light 能力有限,至于如何自己去寫 webpack 插件,在這就不聊了!我也不會??!

下面是完整的配置文件:

var path = require("path");
var webpack = require("webpack");
module.exports = {
  entry: {
    index:"./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    loaders:[{
      test: /.css$/, 
      loader: "style-loader!css-loader!postcss-loader"
    },{
      test: /.(png|jpg|gif|svg)$/,
      loader: "url-loader?limit=2048"
    },{
      test: /.js$/,
      exclude: /node_modules/, 
      loader: "babel-loader" 
    }]
  },
  plugins:[
    //代碼壓縮
    new webpack.optimize.UglifyJsPlugin({
      compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true
      }
    })
  ]
}

也可以訪問 git 來獲取這個最簡單的 webpack 開發環境:https://github.com/rcg1994/we...

ok!今天到此為止,如果你正好看到這篇文章,又正好看到這句話,那咱就交個朋友吧。有任何問題都可以在文末留言,或者加我微信。一起交流才能進步。下次談談 webpack 熱更新或者其他能想到的。最后獻上個人微信號:

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81834.html

相關文章

  • webpack 大法 ---- what`s webpack?(前言)

    摘要:原始的開發模式已經滿足不了呈指數增長的需求了。它承擔起了模塊管理這一重要角色。是個前端小菜鳥,接觸前端不到兩年時間,去年畢業正式參加工作。目前就職于杭州邊鋒網絡神盾局就是這么霸氣。 對于剛進入前端領域的人,特別是還處于小白階段的初學者來說,很多人對 webpack 并不熟知。就像 Light (對,我就是 Light)一樣,剛接觸前端,最關心的就是樣式和簡單的交互了。那時候怎么會知道像...

    wwolf 評論0 收藏0
  • JavaScript系列(四) - 收藏集 - 掘金

    摘要:函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言 面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言,然而,近幾年,函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此,...

    cfanr 評論0 收藏0
  • 個人分享--web前端學習資源分享

    摘要:前言月份開始出沒社區,現在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區,現在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...

    sherlock221 評論0 收藏0
  • 模型評價(一) AUC大法

    摘要:問題是什么能拿來干什么如何求解深入理解是什么混淆矩陣混淆矩陣是理解大多數評價指標的基礎,毫無疑問也是理解的基礎。內容的召回往往是根據的排序而決定的。 問題: AUC是什么 AUC能拿來干什么 AUC如何求解(深入理解AUC) AUC是什么 混淆矩陣(Confusion matrix) 混淆矩陣是理解大多數評價指標的基礎,毫無疑問也是理解AUC的基礎。豐富的資料介紹著混淆矩陣的概念,...

    SoapEye 評論0 收藏0

發表評論

0條評論

QLQ

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<