webpack學(xué)習(xí)筆記

Towers 發(fā)布于2019-08-19 18:14 / 2821人閱讀

摘要：是流行的資源打包工具，屬于前端工作流的一部分。簡(jiǎn)單說(shuō)，它牛逼的地方就是把一切靜態(tài)資源打包在一個(gè)文件，并且有一堆的插件。安裝把安裝到項(xiàng)目依賴安裝到項(xiàng)目。要工作，依賴于一個(gè)的配置文件。

1、webpack是流行的資源打包工具，屬于前端workflow（工作流）的一部分。

簡(jiǎn)單說(shuō)，它牛逼的地方就是把一切靜態(tài)資源打包在一個(gè)文件，并且有一堆的插件。

2、安裝webpack

把webpack安裝到項(xiàng)目依賴
npm install webpack --save-dev 安裝到項(xiàng)目。

3、webpack要工作，依賴于一個(gè)webpack.config.js的配置文件。

module.exports={        //node.js的模塊輸出標(biāo)準(zhǔn)格式
    entry: "./main.js",     //entry是入口文件,是程序的入口文件的相對(duì)地址
    output: {               //打包后輸出的文件
        filename: "bundle.js"       //輸出的文件叫做bundle.js
    }
};

4、命令行執(zhí)行webpack

調(diào)用全局安裝的webpack工具對(duì)資源進(jìn)行打包，最后輸出或創(chuàng)建bundle.js文件

5、index.html script src = bundle.js

網(wǎng)頁(yè)最后調(diào)用的是打包后的文件

6、入口文件的數(shù)量有多個(gè)

//node.js的模塊輸出標(biāo)準(zhǔn)格式
module.exports = {
    //entry是入口文件,是程序的入口文件的相對(duì)地址
    entry: {
        bundle1: "./main1.js",
        bundle2: "./main2.js"
    },
    //打包后輸出的文件
    output: {
        filename: "[name].js"
    }
    //輸出的文件叫做bundle.js
};

GPU云服務(wù)器云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

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

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

相關(guān)文章

webpack 學(xué)習(xí)筆記（一）

摘要：引言最近在學(xué)習(xí)，發(fā)現(xiàn)好多知識(shí)點(diǎn)，之前一點(diǎn)都沒(méi)有接觸過(guò)，如等等。使用本地安裝，會(huì)存于文件夾內(nèi)與屬性內(nèi)，更方便項(xiàng)目文件遷移以及協(xié)同開發(fā)等情況。引言最近在學(xué)習(xí)webpack，發(fā)現(xiàn)好多知識(shí)點(diǎn)，之前一點(diǎn)都沒(méi)有接觸過(guò)，如babel、core-js、browserslist等等。以前習(xí)慣了使用cli構(gòu)建項(xiàng)目，很多東西不用考慮，拿來(lái)就用，這樣的碼農(nóng)是不會(huì)有能力提升的，必須了解更多的知識(shí)點(diǎn)，才能成為...

zhangwang 2019-08-26 10:36 評(píng)論0 收藏0
React學(xué)習(xí)筆記1：環(huán)境搭建

摘要：新搭建的個(gè)人博客，本文地址學(xué)習(xí)筆記環(huán)境搭建本文的書寫環(huán)境為，之后會(huì)補(bǔ)充下的差異創(chuàng)建學(xué)習(xí)目錄初始化項(xiàng)目根據(jù)相關(guān)提示完善信息，入口文件安裝相關(guān)包，并且使用也就是支持，需要包，因?yàn)槲抑白鰝€(gè)一些相關(guān)項(xiàng)目，所以部分包已經(jīng)全局安裝，比如等等，大家新搭建的個(gè)人博客，本文地址：React學(xué)習(xí)筆記1：環(huán)境搭建本文的書寫環(huán)境為mac，之后會(huì)補(bǔ)充windows下的差異 1、創(chuàng)建學(xué)習(xí)目錄 mkdir l...

Sourcelink 2019-08-19 17:26 評(píng)論0 收藏0
我的webpack學(xué)習(xí)筆記（一）

摘要：前言在上一篇文章中我介紹了學(xué)習(xí)前的準(zhǔn)備工作，下面開始的學(xué)習(xí)。目標(biāo)一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對(duì)單頁(yè)面項(xiàng)目的應(yīng)用。我先在假設(shè)要做一個(gè)多頁(yè)面應(yīng)用，該如何去通過(guò)打包。前言在上一篇文章中我介紹了學(xué)習(xí)webpack前的準(zhǔn)備工作，下面開始webpack的學(xué)習(xí)。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 評(píng)論0 收藏0
我的webpack學(xué)習(xí)筆記（一）

摘要：前言在上一篇文章中我介紹了學(xué)習(xí)前的準(zhǔn)備工作，下面開始的學(xué)習(xí)。目標(biāo)一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對(duì)單頁(yè)面項(xiàng)目的應(yīng)用。我先在假設(shè)要做一個(gè)多頁(yè)面應(yīng)用，該如何去通過(guò)打包。前言在上一篇文章中我介紹了學(xué)習(xí)webpack前的準(zhǔn)備工作，下面開始webpack的學(xué)習(xí)。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 評(píng)論0 收藏0
webpack學(xué)習(xí)筆記

摘要：運(yùn)行該語(yǔ)句會(huì)執(zhí)行如下步驟使用進(jìn)行文件壓縮。設(shè)置環(huán)境變量，觸發(fā)某些包，以不同的方式進(jìn)行編譯。在原始的源碼中執(zhí)行查找和替換操作。等同于表示任何出現(xiàn)的地方都會(huì)被替換為。提供函數(shù)用來(lái)合并配置對(duì)象當(dāng)文件小于限制，會(huì)返回。選項(xiàng) 1.devtool：通過(guò)在瀏覽器調(diào)試工具(browser devtools)中添加元信息(meta info)增強(qiáng)調(diào)試。 2.resolve.alias:創(chuàng)建 impor...

Soarkey 2019-08-22 10:53 評(píng)論0 收藏0