建立項目的webpack簡單配置

AlphaWatch 發布于2019-08-22 11:22 / 3445人閱讀

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

實戰項目中的 Webpack 配置：

說明：以下命令通過 Git Bash 執行

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的相關信息（主要是安裝模塊信息）

2.安裝 Webpack

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

3.建立項目所需文件夾

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

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

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

4.配置 webpack.config.js

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

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

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

function helloWorld() {
    
}

Git Bash 運行以下命令

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

打包成功以后，在 dist下會多一個js文件夾，里邊是打包后文件bundle.js.
最簡單的 Webpack 打包配置完成。

GPU云服務器云服務器簡單的asp項目 webpack cdn配置 webpack配置cdn webpack常用配置項

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92280.html

webpack的學習之路~~第一天

摘要：第節認識的作用學習的一原因現在的前端網頁功能豐富，特別是單頁應用技術流行后，的復雜度增加和需要一大堆依賴包，還需要解決，新增樣式的擴展寫法的編譯工作。在出現后，還肩負起了優化項目的責任。其實就是獲取了項目的絕對路徑。第01節：認識WebPack的作用：學習的一原因：現在的前端網頁功能豐富，特別是SPA（single page web application 單頁應用）技術流行后，...

blankyao 2019-08-22 17:03 評論0 收藏0
webpack基礎用法

摘要：的用法全在配置中是在環境下運行的，學習之前，請先自行安裝環境含安裝第一步全局安裝第二步建立項目文件夾，如一直回車下去項目目錄本地安裝搭建目錄結構在項目根目錄下的簡單目錄結構如下入口文件安裝時，自動建立 ----------webpack的用法全在配置中！！webpack是在node環境下運行的，學習webpack之前，請先自行安裝node環境（含npm）；安裝webpack：第一步...

yexiaobai 2019-08-19 18:10 評論0 收藏0
webpack從零開始搭建多頁面（一）:webpack起步到運行一個簡單的demo

摘要：文件夾用來存放供瀏覽器讀取的文件，這個是打包成的文件。在文件下手動建立一個文件，并寫入下面的代碼。配置出口文件的地址在版本后，支持多出口配置。可以防止不同操作系統之間的文件路徑問題，并且可以使用相對路徑按照預期工作。搭建webpack_demo1項目，使其運行起來 webpack的強大就不介紹了，我們直接動手做起來，我們從零開始一步步搭建一個多頁面的系統，多參考webpack中文文檔...

EsgynChina 2019-08-26 11:39 評論0 收藏0
React入門系列 - 2 編寫第一個Hello world的React程序

摘要：安裝必要的開發包安裝兩個包安裝編寫一個的首先我們編寫一個的組件但是這僅僅是一個組件，我們需要一個頁面來容納的組件。到這一步，需要準備的東西已經完成了。 2.1 采用create react app 編寫 create-react-app項目 [[點擊前往Github]](https://github.com/facebook/c... 是facebook推出的入門初始化項目，適合新手第...

PingCAP 2019-08-23 14:37 評論0 收藏0
ES6-開發環境搭建（1）

摘要：全局安裝本地安裝轉碼規則安裝完成后，我們可以看一下我們的文件，已經多了選項。直接在線編譯提供一個在線編譯器，可以在線將代碼轉為代碼。古語有云：君子生非異也，善假于物；工欲善其事，必先利其器。由于有些低版本的瀏覽器還是不支持ES6語法，學習ES6，首先要學會搭建一個基本的ES6開發環境，利用工具，把ES6的語法轉變成ES5的語法。 1、使用Babel把ES6編譯成ES5 1...

android_c 2019-08-23 15:21 評論0 收藏0