亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

webpack的教程

Zhuxy / 654人閱讀

摘要：有時(shí)候覺(jué)得一個(gè)工具的學(xué)習(xí)成本還是很大的，所以唯一的感覺(jué)就是隨隨便便放棄一個(gè)工具是多么的難。指定執(zhí)行的方法命令。這時(shí)候我們?cè)倏匆幌履夸洉?huì)多出來(lái)一個(gè)目錄說(shuō)明你的處女終于破了。

嘮嘮嗑

?前幾天在學(xué)習(xí)webpack時(shí),踩過(guò)很多坑，也聽(tīng)過(guò)webapck是多么的嗶嗶嗶嗶~~， 本人學(xué)習(xí)的工具有很多,比如sass的初級(jí)工具compass,自動(dòng)化工具gulp,grunt,一起其他雜七雜八的工具。有時(shí)候覺(jué)得一個(gè)工具的學(xué)習(xí)成本還是很大的，所以唯一的感覺(jué)就是隨隨便便放棄一個(gè)工具是多么的難。鑒于webpack死粉所說(shuō)的,不全用webpack的人不是一個(gè)好前端,我想我會(huì)送你 老中醫(yī)歌里面的一句--一頓五毒排逼掌,把腦袋打放屁~ -.-~ 所以后面會(huì)介紹使用gulp和webpack的結(jié)合使用。

?廢話不多說(shuō),小伙子，讓我們來(lái)一起談?wù)剋ebapck;

webapck的基本認(rèn)識(shí)

?webpack 最大的好處就是, 在前端的世界里,js才是王~簡(jiǎn)而言之就是, 其他的資源都可以在js里面引入,并且打包,比如: CSS, .SCSS, .LESS, .JSX,image 等等其他的資源。當(dāng)然，為了處理scss,jsx在瀏覽器端的使用，還需要另外一個(gè)重要的東西,xxx-loader;
就像這樣:

//在main.js
require("./style.css");
require("./c.css");
require("./a.js");

?另外就是他的module打包的工具, 無(wú)論你是在后端的commonJS 的寫法, 還是browser 端的CMD/AMD,requireJS/seaJS等,統(tǒng)統(tǒng)一鍵搞定。接下來(lái)讓我使用webpack吧. just do it;

初識(shí)webpack

我們一步一步來(lái):

下載webpack

npm install webpack -g;

這樣就可以在gitBash里面使用webpack命令;
webpack的基本命令:

// webpack 命令行的幾種基本命令

$ webpack  // 最基本的啟動(dòng)webpack方法
$ webpack -w // 提供watch方法，實(shí)時(shí)進(jìn)行打包更新
$ webpack -p // 對(duì)打包后的文件進(jìn)行壓縮，提供production
$ webpack -d // 提供source map，方便調(diào)試。

建立工程目錄:
為了方便，我們來(lái)建立一個(gè)簡(jiǎn)單的目錄:
大家可以按照我下面的目錄建立~

我們來(lái)解釋一下:
?example.js就是你寫的主文件，可以各種引用。
?webpack.config.js就是webpack的核心文件.

webpack.config.js的配置:
請(qǐng)先下載:
npm i loader-css file-loade;
這兩個(gè)模塊都會(huì)用到

var path = require("path");
module.exports = {
     entry: {
      example:"./example.js"
    }, //演示單入口文件
    output: {
        path: path.join(__dirname, "out"), //打包輸出的路徑 
        filename: "[name].entry.js", //打包后的名字
    },
    module: {
        loaders: [  //這就是前面所提到的loader
            {
                test: /.css$/,
                loader:"css"
            },
            { test: /.png$/, loader: "file-loader" }
        ]
    }
    
};

其中
test用來(lái)指定執(zhí)行哪些文件的后綴.。
loader指定執(zhí)行的方法命令。
按照上面的寫就可以了，你也可以直接貼到你的代碼中去.

我們看看example.js有哪些東西~

//example.js
require("./style.css");
require("./a.js");

就這倆個(gè)
然后我們看看a.js里面寫的是什么哈~

//a.js
console.log("this is my first webpack project");

運(yùn)行命令

webpack

接下來(lái)請(qǐng)緊盯著你的bash，你會(huì)看見(jiàn)一些花花綠綠的帶出出來(lái)了, 這時(shí)候請(qǐng)?jiān)谛睦锬钊?
no error!
no error!
no error!
如果最后，你的屏幕會(huì)是這樣的話

恭喜啊~隔壁的老王，你的webpack好了。這時(shí)候我們?cè)倏匆幌履夸?

會(huì)多出來(lái)一個(gè)目錄:out!!!, 說(shuō)明你的處女webpack終于破了。

我就呵呵了,還有誰(shuí)!!!(Ps:小智)

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

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

相關(guān)文章

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

    摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開(kāi)放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開(kāi)源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...

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

  • webpack 教程資源收集

    學(xué)習(xí)的過(guò)程中收藏了這些優(yōu)秀教程和的項(xiàng)目，希望對(duì)你有幫助。 github地址, 有不錯(cuò)的就更新 官方文檔 中文指南 初級(jí)教程 webpack-howto 作者：Pete Hunt Webpack 入門指迷 作者：題葉 　 webpack-demos 作者：ruanyf 一小時(shí)包教會(huì) —— webpack 入門指南 作者：VaJoy Larn　　 webpack 入門及實(shí)踐 作者：...

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

  • webpack4系列教程（十）：總結(jié)

    摘要：傳送門系列教程一初識(shí)系列教程二創(chuàng)建項(xiàng)目，打包第一個(gè)文件系列教程三自動(dòng)生成項(xiàng)目中的文件系列教程四處理項(xiàng)目中的資源文件一系列教程五處理項(xiàng)目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開(kāi)發(fā)日益復(fù)雜的今天，我們需要一個(gè)工具來(lái)幫助我們管理項(xiàng)目資源，打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無(wú)疑是前端開(kāi)發(fā)者的福音，我的博文只...

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

  • webpack4詳細(xì)教程，從無(wú)到有搭建react腳手架（一）

    摘要：是一個(gè)現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個(gè)前端工程師切圖仔，非常有必要學(xué)習(xí)。官網(wǎng)的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。 webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個(gè)前端工程師（切圖仔），非常有必要學(xué)習(xí)。 showImg(https://segment...

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

  • webpack 教科書式入門教程

    摘要：教程最近剛用完又來(lái)?yè)v鼓搗鼓，這只是個(gè)簡(jiǎn)單的新手入門教程不多說(shuō)注意安裝前檢查的安裝目錄路徑是否存在空格，建議安裝在無(wú)空格文件夾目錄下。 Webpack4.x 教程 最近剛用完 gulp 又來(lái)?yè)v鼓搗鼓 webpack ，這只是個(gè)簡(jiǎn)單的新手入門教程...不多說(shuō)；注意：安裝webpack前檢查nodejs的安裝目錄路徑是否存在空格( Program Files (x86) )，建議安裝在無(wú)空格...

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

  • webpack4 系列教程: 前言

    摘要：課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識(shí)點(diǎn)，目錄分成了個(gè)文件夾之后還會(huì)持續(xù)更新。個(gè)人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過(guò)時(shí)，最近內(nèi)容請(qǐng)看：https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開(kāi)發(fā)者可以輕松地實(shí)現(xiàn)加密代碼、多平臺(tái)兼容。而最重要的...

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

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

0條評(píng)論

閱讀需要支付1元查看
<