webpack

kelvinlee 發(fā)布于2019-08-23 12:23 / 2141人閱讀

摘要：請(qǐng)參考右邊網(wǎng)頁(yè)的和篇安裝先使用進(jìn)入一個(gè)你想安裝的位置，然后請(qǐng)?jiān)诶镙斎肴缦旅睿撁顚⑾螺d最新版本的。

請(qǐng)參考右邊網(wǎng)頁(yè)的Installation和Getting Started篇：https://webpack.js.org/guides/

安裝webpack

先使用git bash進(jìn)入一個(gè)你想安裝的位置，然后請(qǐng)?jiān)?strong>git bash里輸入如下命令，該命令將下載最新版本的webpack。

cd //這里填寫(xiě)你想安裝的位置
npm install --save-dev webpack

webpack安裝成功及文件夾中新增文件如下二圖：

新建信息文件package.json

webpack安裝成功后，如果想在目錄下新建一個(gè)webpack相關(guān)的信息文件，請(qǐng)使用下面命令：

npm init -y

信息文件package.json新建成功及文件夾中新增文件如下二圖：

加載Lodash 方法1

首先，修改文件夾結(jié)構(gòu)，添加下圖中沒(méi)有的文件夾和文件：

node_modules、package-lock.json是下載webpack產(chǎn)生的文件

package.json是webpack相關(guān)的信息文件，現(xiàn)在需要修改私密性

+   "private": true,        //前面加號(hào)表示請(qǐng) 添加 這行
-   "main": "index.js",     //前面減號(hào)表示請(qǐng) 刪除 這行

添加index.html




    Getting Started

添加./src/index.js

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

    // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(["Hello", "webpack"], " ");

    return element;
}

document.body.appendChild(component());

完成添加、修改，運(yùn)行index.html，看到如下結(jié)果，說(shuō)明正確：

方法2

修改文件夾結(jié)構(gòu)，將index.html移入文件夾dist中：

在webpack安裝目錄下，使用如下命令安裝lodash

cd //這里填寫(xiě)webpack安裝目錄
npm install --save lodash

安裝成功后，會(huì)在node_modules里添加新文件夾lodash、lodash.debounce：

修改./src/index.js

import _ from "lodash"    //

GPU云服務(wù)器云服務(wù)器 webpack _webpack webpack cdn webpack2

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

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

相關(guān)文章

webpack簡(jiǎn)介與常用配置之插件

摘要：安裝插件能幫忙每次打包之前先刪除文件夾。安裝插件提供了一種自定義編譯期間如何報(bào)告進(jìn)度的方法。插件能創(chuàng)建環(huán)境變量開(kāi)發(fā)與生產(chǎn)時(shí)的不同配置時(shí)使用選項(xiàng)設(shè)置不同的配置文件開(kāi)發(fā)生產(chǎn)能夠?yàn)槲覀兲峁┮粋€(gè)簡(jiǎn)單的并且具有實(shí)時(shí)重新加載功能。寫(xiě)在前面，近期有想法整理一下前端工程化相關(guān)的知識(shí)，就先從打包工具開(kāi)始吧；今天帶來(lái)的是webpack相關(guān)的一些常用插件配置，后期有時(shí)間話，也會(huì)出一些比較輕量級(jí)的打包工具的...

AlienZHOU 2019-08-23 17:11 評(píng)論0 收藏0
webpack 教程資源收集

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

Backache 2019-08-21 14:05 評(píng)論0 收藏0
webpack 項(xiàng)目構(gòu)建：（三）開(kāi)發(fā)環(huán)境——本地服務(wù)器搭建

摘要：上一章我們了解了的編譯環(huán)境搭建項(xiàng)目構(gòu)建二編譯環(huán)境搭建這一章我們會(huì)結(jié)合的，介紹本地測(cè)試服務(wù)器的搭建過(guò)程。三開(kāi)發(fā)環(huán)境有一些特性是專(zhuān)門(mén)用于開(kāi)發(fā)環(huán)境的，可以幫助我們搭建一個(gè)更好的開(kāi)發(fā)環(huán)境。我們可以通過(guò)配合使用來(lái)搭建本地服務(wù)。注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...

tolerious 2019-08-22 15:10 評(píng)論0 收藏0
什么是 Webpack？【Webpack Book 翻譯】

摘要：資源哈希編碼使用可以為每個(gè)包的名稱注入一個(gè)哈希值例如，，以便在版本更新后使客戶端上舊版本的包無(wú)效重新下載。如此受人喜愛(ài)的原因之一是熱模塊更換。可以為文件名生成哈希值，在內(nèi)容更改時(shí)，可以作廢瀏覽器緩存中上個(gè)版本的包。原文鏈接：https://survivejs.com/webpack...翻譯計(jì)劃：https://segmentfault.com/a/11... 涉及到的未翻譯單詞 ...

tainzhi 2019-08-23 10:59 評(píng)論0 收藏0
從零開(kāi)始的webpack生活-0x001：webpack初次相逢

摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類(lèi)似方式。如果打包過(guò)程出現(xiàn)錯(cuò)誤，比如語(yǔ)法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。 0x001 概述其實(shí)我不知道怎么寫(xiě)，所以決定就一塊一塊的寫(xiě)點(diǎn)平常配置的過(guò)程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評(píng)論0 收藏0
WEBPACK 入門(mén)

摘要：入門(mén)什么是官網(wǎng)介紹是一個(gè)模塊打包器。處理帶有依賴關(guān)系的模塊，生成一系列表示這些模塊的靜態(tài)資源。。我們?cè)诋?dāng)前項(xiàng)目根目錄下新建一個(gè)文件，為命令配置選項(xiàng)。引入生成的在瀏覽器中打開(kāi)。我們刷新頁(yè)面，可以發(fā)現(xiàn)頁(yè)面發(fā)生了變化。 webpack 入門(mén) 1. 什么是webpack 官網(wǎng)介紹：webpack是一個(gè)模塊打包器。webpack 處理帶有依賴關(guān)系的模塊，生成一系列表示這些模塊的靜態(tài)資源。(web...

mikasa 2019-08-19 18:17 評(píng)論0 收藏0