webpack 項目構建：（一）基本架構搭建

注：如下教程均在 windows 環境實現，使用其餘操做系統的同窗實踐過程可能會有些出入。

1、準備工做

1. 安裝最新的 Node.js 環境；（官網地址：https://nodejs.org/zh-cn/）
2. 安裝 cnpm 淘寶npm鏡像；（在控制檯執行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org）

2、搭建 webpack 基本文件目錄

1. 新建一個文件夾並命名爲 webpackDemo；
2. 命令行切換到 webpackDemo 的文件目錄下，執行 npm init -y 生成默認 package.json 配置文件；（package.json 文件用於描述項目的一些基本信息，以及依賴的配置，具體字段含義不在此處說明）
3. 利用 cnpm 安裝 webpack（這裏使用 webpack@3.11.0 版本）：cnpm i --save-dev webpack@3；
4. 新建 webpack.config.js；（用於配置 webpack 的運行方式）

  如今咱們 webpackDemo 文件夾內的結構應該是這樣的：

3、配置 webpack.config.js

  如今已經搭建好 webpack 的基本目錄了，如今若是在 webpackDemo 的目錄下執行命令 webpack，會提示以下錯誤：

  這是由於在 webpack 命令執行過程當中，會從當前路徑讀取 webpack.config.js 的配置信息，如今咱們的 webpack.config.js 文件是空的，沒有 output.filename 這個配置項，因此會提示 'output.filename' 這個配置項是必須的。
  如今讓咱們讓咱們配置一個最簡單的 webpack.config.js：

webpack.config.js

  根據配置信息，webpack 會找到打包入口起點 ./index.js，並輸出文件 ./test.js。如今咱們的當前目錄下還不存在 index.js，因此先新建一個 index.js 文件：

index.js

  咱們的入口文件作的事情很簡單，僅僅是定義了一個 test 變量。

  如今咱們的文件目錄結構是這樣的：

  接下來讓咱們在 webpackDemo 目錄下執行 webpack 打包命令，看看會發生什麼：

  從輸出信息裏能夠看出來，webpack 打包耗時 67ms，在當前目錄產生了一個 2.49kB 的 test.js 文件。再看咱們的文件目錄結構，多出了一個 test.js 文件：

  如今讓咱們來看一下通過 webpack 打包生成的 test.js 文件。


  能夠看到打包出來的 test.js 文件就是一個自執行的函數：

(function(modules) {
    ...
})([
    (function(module, exports) {
        var test = 123;
    })
]);

  咱們的 index.js 文件的內容，被以函數數組的形式傳遞到 modules 參數中，並在主函數中被執行。（webpack 生成文件的具體說明將在後續章節會提到。）

  以上就是最基本的 webpack 項目結構搭建。在下一個章節，咱們會配合 babel 搭建一個能夠用最新 ES6 語法開發的平臺（webpack 項目構建：（二）ES6 編譯環境搭建）。

源碼下載地址：https://github.com/xh4722/web...