摘要：文件夾用來(lái)存放供瀏覽器讀取的文件，這個(gè)是打包成的文件。在文件下手動(dòng)建立一個(gè)文件，并寫(xiě)入下面的代碼。配置出口文件的地址在版本后，支持多出口配置。可以防止不同操作系統(tǒng)之間的文件路徑問(wèn)題，并且可以使用相對(duì)路徑按照預(yù)期工作。

webpack的強(qiáng)大就不介紹了，我們直接動(dòng)手做起來(lái)，我們從零開(kāi)始一步步搭建一個(gè)多頁(yè)面的系統(tǒng)，多參考webpack中文文檔

cmd命令：

mkdir webpack_demo1             #創(chuàng)建文件夾
cd webpack_demo1                #進(jìn)入文件夾
npm install -g webpack          #全局安裝webpack
npm init                        #初始化
npm install --save-dev webpack  #安裝webpack包

可以安裝淘寶鏡像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 上面的npm就可以寫(xiě)成cnpm

demo1的目錄：

|——node_modules
├─dist           # 打包后的文件
|   ├─greeter.js #就放了一句話
|   |──main.js   #入口文件
├─src            #當(dāng)前項(xiàng)目的源碼
|   ├─greeter.js #就放了一句話
|  |──main.js    #入口文件
|——webpack.config.js #webpack配置文件
|——package.json      #依賴包

1、建項(xiàng)目目錄并完成第一次打包

進(jìn)入上我們建立的webpack_demo1目錄，建立兩個(gè)文件夾，分別是src文件夾和dist文件夾：

src文件夾：用來(lái)存放我們編寫(xiě)的javascript代碼，可以簡(jiǎn)單的理解為用JavaScript編寫(xiě)的模塊。

dist文件夾：用來(lái)存放供瀏覽器讀取的文件，這個(gè)是webpack打包成的文件。

可以理解成src是源碼文件，dist是我們編譯打包好的文件；一個(gè)用于開(kāi)發(fā)環(huán)境，一個(gè)用于生產(chǎn)環(huán)境。

在dist文件下手動(dòng)建立一個(gè)index.html文件，并寫(xiě)入下面的代碼。

在src文件夾下建立main.js和greeter.js，編寫(xiě)我們的JavaScript代碼，main.js是我們的入口文件。

在main.js文件里寫(xiě): 
    const greeter=require("./greeter.js");
    document.getElementById("root").innerHTML = greeter();
在greeter.js文件里寫(xiě):  
    module.export = function(){
        return "第一個(gè)webpack demo";
    };

第一次打包

在終端下 寫(xiě)命令：webpack "entry file" "destination for bundled file"

entery file: 入口文件的路徑，這里就是src/main.js
destination for bundled file: 填寫(xiě)打包后存放的路徑，這里就是dist/bundle.js

所以終端寫(xiě)：webpack src/entry.js dist/bundle.js(webpack非全局安裝執(zhí)行：node_modules/.bin/webpack src/main.js dist/bundle.js)

成功后，在dist文件夾下會(huì)出現(xiàn)一個(gè)bundle.js

2、通過(guò)配置文件來(lái)使用Webpack打包

在根目錄下新建一個(gè)名為webpack.config.js的文件，

標(biāo)準(zhǔn)的webpack配置模板：
     module.exports={
        
         entry:{}, //配置入口文件的地址,可以是單一入口，也可以是多入口。
        
         output:{}, //配置出口文件的地址,在webpack2.X版本后，支持多出口配置。
         
         module:{},//配置模塊：主要是解析CSS和圖片轉(zhuǎn)換壓縮等功能。
         
         plugins:[],//配置插件，用于生產(chǎn)模版和各項(xiàng)功能
        
         devServer:{} //配置webpack開(kāi)發(fā)服務(wù)功能
     }
     

我們?cè)谄渲袑?xiě)入如下所示的簡(jiǎn)單配置代碼: 入口文件路徑/打包后文件的存放路徑:

    const webpack = require("webpack");
    const path = require("path");
    module.exports = {
        entry:  __dirname + "/src/main.js",//已多次提及的唯一入口文件
        output: {
            path: __dirname + "/dist",//打包后的文件存放的地方
            filename: "bundle.js"http://打包后輸出文件的文件名
        },
        module:{},
    
        plugins:[],
    
        devServer:{}
    };
    //__dirname”是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄。
    

第二次打包 （先刪掉dist中已有的bundle.js）

在終端下 寫(xiě)命令：webpack（wepack非全局安裝執(zhí)行：node_modules/.bin/webpack）

成功后，在dist文件夾下會(huì)出現(xiàn)一個(gè)bundle.js

3、更快捷的執(zhí)行打包

在命令行中輸入命令"node_modules/.bin/webpack"這樣的操作是比較煩人的，不過(guò)值得慶幸的是npm可以引導(dǎo)任務(wù)執(zhí)行，
對(duì)npm進(jìn)行配置后可以在命令行中使用簡(jiǎn)單的npm start命令來(lái)替代上面略微繁瑣的命令：

在package.json中對(duì)scripts對(duì)象添加一條下命令："start": "wepack"

注意：package.json中的script會(huì)安裝一定順序?qū)ふ颐顚?duì)應(yīng)位置，本地的node_modules/.bin路徑就在這個(gè)尋找清單中，所以無(wú)論是全局還是局部安裝的Webpack，都不需要寫(xiě)前面那指明詳細(xì)的路徑了。

第三次打包：（先刪掉dist中已有的bundle.js）

在命令行中輸入：npm start
成功后，在dist文件夾下會(huì)出現(xiàn)一個(gè)bundle.js

使用webpack構(gòu)建本地服務(wù)器

讓瀏覽器監(jiān)聽(tīng)你的代碼的修改，并自動(dòng)刷新顯示修改后的結(jié)果： 

在終端輸入：npm install --save-dev webpack-dev-server

在package.json中對(duì)scripts對(duì)象添加一條下命令用以開(kāi)啟本地服務(wù)器： "server": "webpack-dev-server --open"

在webpack.config.js中添加devServer:

 devServer:{
    contentBase:path.resolve(__dirname,"dist"), //設(shè)置基本目錄結(jié)構(gòu),本地服務(wù)器所加載的頁(yè)面所在的目錄
    host:"localhost",//服務(wù)器的IP地址，可以使用IP也可以使用localhost
    inline: true,//實(shí)時(shí)刷新
    compress:true,//服務(wù)端壓縮是否開(kāi)啟，一般設(shè)置為開(kāi)啟，
    historyApiFallback: true,//不跳轉(zhuǎn)
    port:1818 //配置服務(wù)端口號(hào)，建議不使用80，很容易被占用，這里使用了1818
 }
 

在頁(yè)面上已經(jīng)可以看到一句話了" 第一個(gè)webpack demo ";

關(guān)于入口和出口配置的寫(xiě)法及其解釋

entry入口：

單入口有以下寫(xiě)法：
    entry:  __dirname + "/src/main.js",
    entry:  "./src/main.js",
多入口有以下寫(xiě)法：
    entry:{
       index: "./src/main.js",
       selectList:"./src/***.js"
     },
     

output出口：

output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    // path:path.resolve(__dirname,"dist"),
    filename: "bundle.js"http://打包后輸出文件的文件名
    //filename:"[name].js"
    // filename:"js/[name].js"
    // filename:"js/[name].bundle-[chunkhash:8].js" 
},

filename: "[name].js"
filename: "[name]-[hash].js"
    打包文件名： main.js
                main-6672c04f6c9672410a61.js
                
filename:"js/[name].js":
    打包目錄是：|——dist
               |    |——js
               |    |   |——main.js
  
filename:"js/[name].bundle-[chunkhash:8].js" :
      打包目錄是：|——dist
                 |    |——js
                 |    |   |——main.bundle-d0dea2df.js
                 
[name]：是根據(jù)入口文件的名稱，打包成相同的名稱，有幾個(gè)入口文件，就可以打包出幾個(gè)文件。

[chunkhash:8]: 數(shù)字和字母組成的8位哈希值

 __dirname：是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄，打印出來(lái)是：webpackwebpack_demo1
 
 path:使用Node內(nèi)置的path模塊，并在它前面加上__dirname這個(gè)全局變量。
      可以防止不同操作系統(tǒng)之間的文件路徑問(wèn)題，并且可以使用相對(duì)路徑按照預(yù)期工作。
         

建議使用：filename:"js/[name].bundle-[chunkhash:8].js":

可以通過(guò)命中緩存，以降低網(wǎng)絡(luò)流量，使網(wǎng)站加載速度更快，
然而，如果我們?cè)诓渴鹦掳姹緯r(shí)不更改資源的文件名，瀏覽器可能會(huì)認(rèn)為它沒(méi)有被更新，
就會(huì)使用它的緩存版本。由于緩存的存在，當(dāng)你需要獲取新的代碼時(shí)，就會(huì)顯得很棘手。         

關(guān)于緩存：看文檔