webpack

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

摘要：請參考右邊網(wǎng)頁的和篇安裝先使用進入一個你想安裝的位置，然后請在里輸入如下命令，該命令將下載最新版本的。

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

安裝webpack

先使用git bash進入一個你想安裝的位置，然后請在git bash里輸入如下命令，該命令將下載最新版本的webpack。

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

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

新建信息文件package.json

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

npm init -y

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

加載Lodash 方法1

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

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

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

+   "private": true,        //前面加號表示請 添加 這行
-   "main": "index.js",     //前面減號表示請 刪除 這行

添加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());

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

方法2

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

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

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

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

修改./src/index.js

import _ from "lodash"    //

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

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

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

相關(guān)文章

webpack簡介與常用配置之插件

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

AlienZHOU 2019-08-23 17:11 評論0 收藏0
webpack 教程資源收集

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

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

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

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

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

tainzhi 2019-08-23 10:59 評論0 收藏0
從零開始的webpack生活-0x001：webpack初次相逢

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

Turbo 2019-08-21 17:27 評論0 收藏0
WEBPACK 入門

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

mikasa 2019-08-19 18:17 評論0 收藏0