webpack從零開始搭建多頁面（一）:webpack起步到運行一個簡單的demo

時間 2019-12-04

標籤 webpack 開始搭建頁面起步運行一個簡單 demo 简体版

原文原文鏈接

搭建webpack_demo1項目，使其運行起來

webpack的強大就不介紹了，咱們直接動手作起來，咱們從零開始一步步搭建一個多頁面的系統，多參考webpack中文文檔javascript

cmd命令：html

mkdir webpack_demo1             #建立文件夾
cd webpack_demo1                #進入文件夾
npm install -g webpack          #全局安裝webpack
npm init                        #初始化
npm install --save-dev webpack  #安裝webpack包

能夠安裝淘寶鏡像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 上面的npm就能夠寫成cnpm java

demo1的目錄：node

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

一、建項目目錄並完成第一次打包

進入上咱們創建的webpack_demo1目錄，創建兩個文件夾，分別是src文件夾和dist文件夾：

src文件夾：用來存放咱們編寫的javascript代碼，能夠簡單的理解爲用JavaScript編寫的模塊。

dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。

能夠理解成src是源碼文件，dist是咱們編譯打包好的文件；一個用於開發環境，一個用於生產環境。

在dist文件下手動創建一個index.html文件，並寫入下面的代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack_demo1</title>
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

在src文件夾下創建main.js和greeter.js，編寫咱們的JavaScript代碼，main.js是咱們的入口文件。

在main.js文件裏寫: 
    const greeter=require('./greeter.js');
    document.getElementById('root').innerHTML = greeter();
在greeter.js文件裏寫:  
    module.export = function(){
        return '第一個webpack demo';
    };

第一次打包

在終端下寫命令：webpack "entry file" "destination for bundled file"webpack

entery file: 入口文件的路徑，這裏就是src/main.js
destination for bundled file: 填寫打包後存放的路徑，這裏就是dist/bundle.jsweb

因此終端寫：webpack src/entry.js dist/bundle.js(webpack非全局安裝執行：node_modules/.bin/webpack src/main.js dist/bundle.js)npm

成功後，在dist文件夾下會出現一個bundle.jsjson

二、經過配置文件來使用Webpack打包

在根目錄下新建一個名爲webpack.config.js的文件，

標準的webpack配置模板：
     module.exports={
        
         entry:{}, //配置入口文件的地址,能夠是單一入口，也能夠是多入口。
        
         output:{}, //配置出口文件的地址,在webpack2.X版本後，支持多出口配置。
         
         module:{},//配置模塊：主要是解析CSS和圖片轉換壓縮等功能。
         
         plugins:[],//配置插件，用於生產模版和各項功能
        
         devServer:{} //配置webpack開發服務功能
     }

咱們在其中寫入以下所示的簡單配置代碼: 入口文件路徑/打包後文件的存放路徑:

const webpack = require('webpack');
    const path = require('path');
    module.exports = {
        entry:  __dirname + "/src/main.js",//已屢次說起的惟一入口文件
        output: {
            path: __dirname + "/dist",//打包後的文件存放的地方
            filename: "bundle.js"//打包後輸出文件的文件名
        },
        module:{},
    
        plugins:[],
    
        devServer:{}
    };
    //__dirname」是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

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

在終端下寫命令：webpack（wepack非全局安裝執行：node_modules/.bin/webpack）瀏覽器

成功後，在dist文件夾下會出現一個bundle.js緩存

三、更快捷的執行打包

在命令行中輸入命令"node_modules/.bin/webpack"這樣的操做是比較煩人的，不過值得慶幸的是npm能夠引導任務執行，
對npm進行配置後能夠在命令行中使用簡單的npm start命令來替代上面略微繁瑣的命令：

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

注意：package.json中的script會安裝必定順序尋找命令對應位置，本地的node_modules/.bin路徑就在這個尋找清單中，因此不管是全局仍是局部安裝的Webpack，都不須要寫前面那指明詳細的路徑了。

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

在命令行中輸入：npm start
成功後，在dist文件夾下會出現一個bundle.js

使用webpack構建本地服務器

讓瀏覽器監聽你的代碼的修改，並自動刷新顯示修改後的結果： 

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

在package.json中對scripts對象添加一條下命令用以開啓本地服務器： "server": "webpack-dev-server --open"

在webpack.config.js中添加devServer:

devServer:{
    contentBase:path.resolve(__dirname,'dist'), //設置基本目錄結構,本地服務器所加載的頁面所在的目錄
    host:'localhost',//服務器的IP地址，能夠使用IP也能夠使用localhost
    inline: true,//實時刷新
    compress:true,//服務端壓縮是否開啓，通常設置爲開啓，
    historyApiFallback: true,//不跳轉
    port:1818 //配置服務端口號，建議不使用80，很容易被佔用，這裏使用了1818
 }

在頁面上已經能夠看到一句話了" 第一個webpack demo ";

關於入口和出口配置的寫法及其解釋

entry入口：

單入口有如下寫法：
    entry:  __dirname + "/src/main.js",
    entry:  './src/main.js',
多入口有如下寫法：
    entry:{
       index: './src/main.js',
       selectList:'./src/***.js'
     },

output出口：

output: {
    path: __dirname + "/dist",//打包後的文件存放的地方
    // path:path.resolve(__dirname,'dist'),
    filename: "bundle.js"//打包後輸出文件的文件名
    //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]：是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就能夠打包出幾個文件。

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

 __dirname：是node.js中的一個全局變量，它指向當前執行腳本所在的目錄，打印出來是：\webpack\webpack_demo1
 
 path:使用Node內置的path模塊，並在它前面加上__dirname這個全局變量。
      能夠防止不一樣操做系統之間的文件路徑問題，而且能夠使用相對路徑按照預期工做。

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

能夠經過命中緩存，以下降網絡流量，使網站加載速度更快，
然而，若是咱們在部署新版本時不更改資源的文件名，瀏覽器可能會認爲它沒有被更新，
就會使用它的緩存版本。因爲緩存的存在，當你須要獲取新的代碼時，就會顯得很棘手。

關於緩存：看文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。