建立項(xiàng)目的webpack簡(jiǎn)單配置

AlphaWatch 發(fā)布于2019-08-22 11:22 / 3478人閱讀

摘要：下新建和文件夾，如下圖所示配置官方文檔地址根目錄下新建文件，配置內(nèi)容如下入口文件的配置項(xiàng)出口文件的配置項(xiàng)打包的路徑文職打包的文件名稱新建入口文件及代碼如下運(yùn)行以下命令打包成功以后，在下會(huì)多一個(gè)文件夾，里邊是打包后文件最簡(jiǎn)單的打包配置完成。

實(shí)戰(zhàn)項(xiàng)目中的 Webpack 配置：

說(shuō)明：以下命令通過(guò) Git Bash 執(zhí)行

1.建立webpack-demo文件夾及npm初始化

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project
$ mkdir webpack-demo
    
Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project
$ cd webpack-demo/
    
Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ npm init

然后一路回撤，npm初始化成功，建立package.json，用于存放npm的相關(guān)信息（主要是安裝模塊信息）

2.安裝 Webpack

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ npm install webpack --save-dev

3.建立項(xiàng)目所需文件夾

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ mkdir src

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ mkdir dist

然后Sublime打開(kāi)"webpack-demo"，并新建 index.html, 引入一會(huì)打包后的 bundle.js 文件。
src下新建script和style文件夾，如下圖所示：

4.配置 webpack.config.js

官方文檔地址：https://webpack.js.org/configuration/
根目錄下新建 webpack.config.js文件，配置內(nèi)容如下：

const path = require("path");
module.exports = {
    entry: "./src/script/main.js", // 入口文件的配置項(xiàng)
    output:{ // 出口文件的配置項(xiàng)
        path: path.resolve(__dirname, "dist/js"), // 打包的路徑文職
        filename: "bundle.js" // 打包的文件名稱
    }
};

新建入口文件 main.js 及代碼如下：

function helloWorld() {
    
}

Git Bash 運(yùn)行以下命令

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo
$ webpack

打包成功以后，在 dist下會(huì)多一個(gè)js文件夾，里邊是打包后文件bundle.js.
最簡(jiǎn)單的 Webpack 打包配置完成。

GPU云服務(wù)器云服務(wù)器簡(jiǎn)單的asp項(xiàng)目 webpack cdn配置 webpack配置cdn webpack常用配置項(xiàng)

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

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

相關(guān)文章

webpack的學(xué)習(xí)之路~~第一天

摘要：第節(jié)認(rèn)識(shí)的作用學(xué)習(xí)的一原因現(xiàn)在的前端網(wǎng)頁(yè)功能豐富，特別是單頁(yè)應(yīng)用技術(shù)流行后，的復(fù)雜度增加和需要一大堆依賴包，還需要解決，新增樣式的擴(kuò)展寫(xiě)法的編譯工作。在出現(xiàn)后，還肩負(fù)起了優(yōu)化項(xiàng)目的責(zé)任。其實(shí)就是獲取了項(xiàng)目的絕對(duì)路徑。第01節(jié)：認(rèn)識(shí)WebPack的作用：學(xué)習(xí)的一原因：現(xiàn)在的前端網(wǎng)頁(yè)功能豐富，特別是SPA（single page web application 單頁(yè)應(yīng)用）技術(shù)流行后，...

blankyao 2019-08-22 17:03 評(píng)論0 收藏0
webpack基礎(chǔ)用法

摘要：的用法全在配置中是在環(huán)境下運(yùn)行的，學(xué)習(xí)之前，請(qǐng)先自行安裝環(huán)境含安裝第一步全局安裝第二步建立項(xiàng)目文件夾，如一直回車(chē)下去項(xiàng)目目錄本地安裝搭建目錄結(jié)構(gòu)在項(xiàng)目根目錄下的簡(jiǎn)單目錄結(jié)構(gòu)如下入口文件安裝時(shí)，自動(dòng)建立 ----------webpack的用法全在配置中??！webpack是在node環(huán)境下運(yùn)行的，學(xué)習(xí)webpack之前，請(qǐng)先自行安裝node環(huán)境（含npm）；安裝webpack：第一步...

yexiaobai 2019-08-19 18:10 評(píng)論0 收藏0
webpack從零開(kāi)始搭建多頁(yè)面（一）:webpack起步到運(yùn)行一個(gè)簡(jiǎn)單的demo

摘要：文件夾用來(lái)存放供瀏覽器讀取的文件，這個(gè)是打包成的文件。在文件下手動(dòng)建立一個(gè)文件，并寫(xiě)入下面的代碼。配置出口文件的地址在版本后，支持多出口配置?？梢苑乐共煌僮飨到y(tǒng)之間的文件路徑問(wèn)題，并且可以使用相對(duì)路徑按照預(yù)期工作。搭建webpack_demo1項(xiàng)目，使其運(yùn)行起來(lái) webpack的強(qiáng)大就不介紹了，我們直接動(dòng)手做起來(lái)，我們從零開(kāi)始一步步搭建一個(gè)多頁(yè)面的系統(tǒng)，多參考webpack中文文檔...

EsgynChina 2019-08-26 11:39 評(píng)論0 收藏0
React入門(mén)系列 - 2 編寫(xiě)第一個(gè)Hello world的React程序

摘要：安裝必要的開(kāi)發(fā)包安裝兩個(gè)包安裝編寫(xiě)一個(gè)的首先我們編寫(xiě)一個(gè)的組件但是這僅僅是一個(gè)組件，我們需要一個(gè)頁(yè)面來(lái)容納的組件。到這一步，需要準(zhǔn)備的東西已經(jīng)完成了。 2.1 采用create react app 編寫(xiě) create-react-app項(xiàng)目 [[點(diǎn)擊前往Github]](https://github.com/facebook/c... 是facebook推出的入門(mén)初始化項(xiàng)目，適合新手第...

PingCAP 2019-08-23 14:37 評(píng)論0 收藏0
ES6-開(kāi)發(fā)環(huán)境搭建（1）

摘要：全局安裝本地安裝轉(zhuǎn)碼規(guī)則安裝完成后，我們可以看一下我們的文件，已經(jīng)多了選項(xiàng)。直接在線編譯提供一個(gè)在線編譯器，可以在線將代碼轉(zhuǎn)為代碼。古語(yǔ)有云：君子生非異也，善假于物；工欲善其事，必先利其器。由于有些低版本的瀏覽器還是不支持ES6語(yǔ)法，學(xué)習(xí)ES6，首先要學(xué)會(huì)搭建一個(gè)基本的ES6開(kāi)發(fā)環(huán)境，利用工具，把ES6的語(yǔ)法轉(zhuǎn)變成ES5的語(yǔ)法。 1、使用Babel把ES6編譯成ES5 1...

android_c 2019-08-23 15:21 評(píng)論0 收藏0