成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack 2 實(shí)踐系列（一） — 安裝與入門

niceforbear / 1680人閱讀

摘要：全局安裝安裝成功之后，現(xiàn)在命令就在全局生效。為了將依賴關(guān)系與捆綁到一起，我們需要導(dǎo)入。執(zhí)行命令，入口文件為，輸出文件，其中未使用的依賴關(guān)系不會(huì)打入中?，F(xiàn)在我們直接運(yùn)行命令實(shí)現(xiàn)與上面相同的功能。

源碼地址：https://github.com/silence717/webpack2-demos

webpack在你的應(yīng)用中是一個(gè)模塊打包工具。webpack可以簡化工作流，快速構(gòu)建一個(gè)應(yīng)用程序的依賴關(guān)系圖，按照它們正確的順序綁定。webpack可以配置定制優(yōu)化你的代碼，拆分vendor/css/js代碼用于生產(chǎn)環(huán)境，運(yùn)行一個(gè)可以及時(shí)部署代碼并且頁面無刷新的開發(fā)服務(wù)器，還有許多很酷的功能。

安裝webpack

開始之前首先你得在本地安裝一個(gè)新版的nodejs。這是一個(gè)比較好的基礎(chǔ)。老版本你可能會(huì)遇到各種與webpack相關(guān)的功能丟失或者缺少一些依賴的包。

全局安裝 
npm install webpack -g

安裝成功之后，現(xiàn)在webpack命令就在全局生效。
然而，這不是一個(gè)最佳實(shí)踐，因?yàn)樗鼤?huì)鎖定到一個(gè)特定版本的webpack,你在項(xiàng)目中使用不同版本的可能會(huì)失效。

本地安裝 
npm install webpack --save-dev
npm install webpack@ --save-dev

這是一種比較推薦的方法。
如果你想運(yùn)行本地安裝的webpack,你可以進(jìn)入它的bin里面，就像這樣 node_modules/.bin/webpack

極端的方式

如果你對(duì)使用最新的webpack有極大的熱情(注意 - 可能是不穩(wěn)定的)，你可以直接安裝webpack庫使用。

npm install webpack/webpack#
Creating a bundle

創(chuàng)建一個(gè)demo目錄去實(shí)踐webpack.

mkdir webpack2-demo && cd webpack2-demo
mkdir demo01-getting-started && cd demo01-getting-started
npm init -y
npm install --save-dev webpack
npm install --save lodash

現(xiàn)在我們創(chuàng)建一個(gè)index.js文件
getting-started/src/index.js

function component () {
  var element = document.createElement("div");

  /* lodash is required for the next line to work */
  element.innerHTML = _.map(["Hello","webpack"], function(item){
    return item + " ";
  });

  return element;
}

document.body.appendChild(component());

為了運(yùn)行這段代碼，我們創(chuàng)建一個(gè)一個(gè)html
index.html


  
    Webpack demo

在這栗子中，使用 script 標(biāo)簽引入依賴。
index.js依賴lodash，所以最最開始引入它。這個(gè)里面并沒有很直接的表明index.js依賴lodash庫，只是使用了lodash的變量 _。

這種管理javascript項(xiàng)目會(huì)存在一些問題：

如果一個(gè)依賴丟失，或者沒有按照正確的順序去引入，應(yīng)用將不會(huì)工作。

如果一個(gè)依賴被引入了，但是從未使用，瀏覽器就需要加載根本不需要的大段代碼。

為了將lodash依賴關(guān)系與index.js捆綁到一起，我們需要導(dǎo)入lodash。

+ import _ from "lodash";

function component () {
  ...

同樣我們需要改變index.html文件只包含一個(gè)bundlejs文件。


  
    Webpack demo
-   
-   
  
  
+

現(xiàn)在index.js明確表明依賴lodash，并且將其綁定到_，再也不會(huì)產(chǎn)生全局命名污染。

執(zhí)行webpack命令，入口文件為index.js，輸出bundle.js文件，其中未使用的依賴關(guān)系不會(huì)打入bundle.js中。

webpack src/index.js dist/bundle.js
// 輸出
Hash: 73259977daef4d7ca66c
Version: webpack 2.1.0-beta.28
Time: 558ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 371 bytes {0} [built]
用一個(gè)配置文件來使用webpack

webpack.config.js

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: "./dist"
    }
};

使用webpack運(yùn)行這個(gè)文件：

webpack --config webpack.config.js
// 輸出
Hash: 54fb380c0318be007543
Version: webpack 2.1.0-beta.28
Time: 562ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  543 kB       0  [emitted]  [big]  main
   [3] ./src/index.js 371 bytes {0} [built]

如果webpack.config.js已經(jīng)存在，webpack命令會(huì)默認(rèn)選擇它
配置文件能夠靈活使用webpack,添加loaders,插件，解析選項(xiàng)和許多其他增強(qiáng)功能。

在npm中使用Webpack

我們?cè)趐ackage.json中設(shè)置一個(gè)快捷方式，運(yùn)行webpack。

...
"scripts": {
    "build": "webpack"
  }
...

現(xiàn)在我們直接運(yùn)行npm run build命令實(shí)現(xiàn)與上面相同的功能。

總結(jié)

在這個(gè)栗子中，我們了解了webpack的基本概念和配置，之后我們將按照API進(jìn)一步深入學(xué)習(xí)Webpack。

PS：本文完全屬于邊實(shí)踐學(xué)習(xí)邊寫，會(huì)不斷更新，希望不對(duì)的地方可以及時(shí)指出。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86483.html

相關(guān)文章

  • webpack 實(shí)踐筆記（一）--- 入門

    摘要：實(shí)踐筆記入門一官網(wǎng)文檔地址實(shí)踐工程地址本篇文章可切換到分支查看源代碼。簡單分步實(shí)踐創(chuàng)建一個(gè)空文件夾，進(jìn)入全局安裝創(chuàng)建文件創(chuàng)建執(zhí)行命令這個(gè)時(shí)候項(xiàng)目中多了一個(gè)文件，使用標(biāo)簽將其引入到中在瀏覽器中打開文件，頁面出現(xiàn)文字。 webpack 實(shí)踐筆記入門（一） [webpack官網(wǎng)文檔地址]:（http://webpack.github.io/docs...） [實(shí)踐工程地址]: (https:...

    bergwhite 評(píng)論0 收藏0

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 2017年2月份前端資源分享

    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    lily_wang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<