webpack學習之路（一）

時間  2019-11-18
標籤 webpack 學習 之路 简体版
原文   原文鏈接

　　寫在開頭：把學習webpack時的筆記貼上來以備不時之需，多摘自官方文檔，閱讀文檔的時候中英文一塊兒看的，中文文檔有時比較生澀會加入本身的理解。html

安裝：

前提：

　　你要有個node環境（推薦LTS版本）。node

本地安裝： 

npm install --save-dev webpack            //安裝最新版本
 
npm install --save-dev webpack@<version>  //安裝指定版本

　　若是你安裝的是版本v4及以後，還須要安裝webpack-cli：webpack

npm install --save-dev webpack-cli

　　本地安裝是官方推薦方法，由於利於項目的更新，而且webpack每每是經過一條或多條npm命令啓動的，這些命令會在項目的本地node_modules目錄下確認webpack是否安裝。web

　　當你在本地安裝 webpack 後，你可以從 node_modules/.bin/webpack 訪問它的 bin 版本。（這句話沒懂...)npm

全局安裝：

npm install --global webpack

最最新版本安裝：

npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>

　　這些最新體驗版本有機率是有bug滴，不要用於生產環境，本身玩玩就好啦。json

起步

　　來構建個最最最簡單的項目～瀏覽器

　　建立項目目錄、初始化項目並本地安裝webpack、webpack-cli：app

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

　　ps：npm init用來初始化生成一個新的 package.json 文件，會向用戶提一系列問題，使用-y（表明yes）則跳過提問階段直接生成一個新的 package.json 文件。學習

　　建立如下目錄結構、文件和內容：優化

project

 

 
 
  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js
 

 

src/index.js
 

 
 
function component() {
  let element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
 

 

index.html
 

 
 
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
 

 

package.json
 

 
 
  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }
 

 

　　這樣管理項目有如下一些問題：
 

     
 
  • 腳本與外部擴展之間的依賴關係不能明顯到一眼就看出來；
    •  
 
  • 若是萬一哪一個依賴沒有引入或者引入錯誤那程序就報錯啦；
    •  
 
  • 若是有個依賴被引入了可是程序沒有使用的話瀏覽器就必須下載這些沒必要要的代碼。
    •  

 

　　咱們調整一下目錄結構，"source"中的代碼是咱們編輯和修改的代碼，"distribution"代碼是通過構建後壓縮和優化的代碼，最終將被瀏覽器加載。
 

project
 

 
 
  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js
 

 

　　要在index.js中綁定lodash依賴，須要本地安裝：
 

 
 
npm install --save lodash
 

 

　　安裝到打包到生產環境的安裝包時使用npm install --save，安裝用於開發環境的安裝包使用npm install --save-dev。
 

src/index.js
 

 
 
+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());
 

 

dist/index.html
 

 
 
  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>
 

 

　　接下來執行npx webpack，它會把src/index.js做爲入口，而後輸出dist/main.js：
 

 
 
npx webpack

...
Built at: 13/06/2018 11:52:07
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
 

 

　　ps：這裏的警告能夠先不用管，後續會提。
 

　　webpack4能夠無需任何配置開始使用，而大多數項目須要很是複雜的啓動配置，所以webpack支持配置文件，這相比手動在終端輸入大量命令高效地多：
 

project
 

 
 
  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js
 

 

webpack.config.js
 

 
 
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};
 

 

　　再次啓動：
 

 
 
npx webpack --config webpack.config.js

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
 
 

 

　　若是 webpack.config.js 存在，則 webpack 命令將默認選擇使用它。咱們在這裏使用 --config 選項只是向你代表，能夠傳遞任何名稱的配置文件。這對於須要拆分紅多個文件的複雜配置是很是有用的。
 

　　考慮到用cli來運行本地webpack仍是很不方便，所以能夠設置一個快捷方式：
 

package.json
 

 
 
  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }
 

 

　　如今就能夠使用npm run build來代替npx命令，注意，使用 npm 的 scripts，咱們能夠像使用 npx 那樣經過模塊名引用本地安裝的 npm 包。這是大多數基於 npm 的項目遵循的標準，由於它容許全部貢獻者使用同一組通用腳本（若是必要，每一個 flag 都帶有 --config 標誌）：
 

 
 
npm run build

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/.
 

 

　　ps：經過向  命令和你的參數之間添加兩個中橫線，能夠將自定義參數傳遞給 webpack，例如：。npm run buildnpm run build -- --colors


        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

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







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程