1、什麽是webpack

Webpack是前端一個工具,可以讓各個模塊進行加載,預處理,再進行打包。現代的前端開發很多環境都依賴webpack構建，比如vue官方就推薦使用webpack。

2、簡單使用下webpack

2.1、首先我在 c 盤下新建一個webpack-demo1的文件夾，然後命令行進入該目錄，執行 npm init --yes 項目初始化，該命令會在文件下生成一個package.json文件，該命令也可以是 npm init ，這樣的話它會詢問你一系列諸如項目名稱，項目描述，作者等信息，如果你不準備在npm中發布你的模塊，這些問題的答案都不重要，一路回車默認即可。package.json如下：

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

接下來在該環境中安裝一下3.5.6版本webpack，命令 npm install [email protected] --save-dev

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  
 
"devDependencies": {
    "webpack": "^3.5.6"
  }
}

實現打包功能：

打包一個js文件

在根目錄下新建一個index.js，和index.html文件，index.js文件內容：

function say(){
    alert("hello webpack");
}
say();

輸入命令：webpack index.js index.bundle.js,該命令含義：

# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，
# {destination for bundled file}處填寫打包文件的存放路徑
# 填寫路徑的時候不用添加{}
webpack {entry file} {destination for bundled file}

結果自動生成了一個 index.bundle.js 的文件，我們可以在index.html中引入，在瀏覽器中順利彈出 “hello webpack”

打包多個文件：

在根目錄下又新建一個calc.js文件，內容：

function add(a,b){
    return a+b;
}
module.exports = {    //導出這個模塊
    add: add
}

把index.js文件內容更改：

var oCalc = require("./calc");   //引入模塊
function say(){
    alert("hello webpack");
}
say();
alert(oCalc.add(10,20));    //使用該模塊的功能

執行打包：webpack index.js index.bundle.js，成功後，打開index.html，彈出倆次 1、“hello webpack” 2、“30”

3、loader

loaders 用於轉換應用程序的資源文件，他們是運行在nodejs下的函數

舉個例子：

在根目錄下新建一個index.js和一個index.html和一個style.css文件，

style.css

body{
    background-color: skyblue;
}

index.js

function say(){
    alert("hello webpack");
}
say();
require("./style.css");    //在js中引入style.css

打包：webpack index.js index.bundle.js，直接報錯：

提示 你可能需要loader來操作你的文件類型，

安裝對應loader：npm install css-loader style-loader --save-dev,成功後在index.js中引入：

require( ‘style-loader!css-loader!./style.css‘ );
function say(){
    alert("hello webpack");
}
say();

再次打包：webpack index.js index.bundle.js，這次打開index.html，發現頁面背景已經變成了天藍色。並且css是動態創建style引入的

webpack打包，後面可以跟很多參數：

• --progress: 打包進度
• --display-modules: 打包的模塊
• --colors: 是否彩色顯示 打包提示信息
• --display-reasons: 打包原因
• --watch: 自動監控文件變化

比如我使用 --watch：webpack index.js index.bundle.js --watch，這樣的話會自動監測，只要與index.js相關的文件發生了變化，自動打包。

webpack （自己做個筆記而已，方便查看用法）