回顧 webpack3 _

 

模塊打包器(bundler)

1. 核心概念

webpack.config.js    // node 模塊，返回一個 json 格式的配置信息對象

{

entry: {    // 入口

},

output: {    // 輸出

},

loader: {    // 加載器

// 原始 webpack 默認只能加載 js/json 模塊

// 若是要加載其餘類型的模塊文件，就必須使用相關的插件

},

plugins: {    // 插件

// 完成一些 loader 不能完成的功能

}

}

2. 開始

編寫 package.json

• {
      name: "app",
      version: "1.0.0"
  }

npm install -g webpack    // 全局裝 

npm install --save-dev webpack    // 安裝到開發環境

建立 src/js/main.js 文件

webpack src/js/main.js dist/js/    // 會將 main.js 打包處理到 dist/js/bundle.js

3. 支持 ES六、commonJS、AMD

es6 分別暴露 math.js：

解構賦值 entry.js 引入：

再執行打包： webpack src/js/entry.js dist/js/

好處： 不管開發時有多少 js ，都會變成一個 js 文件，意味着只需一個請求就能夠得到js

4. 使用配置文件， 沒必要每次都敲 那麼長的命令

1) 建立 webpack.config.js

執行 weback 便可    ( 會找到並執行當前目錄下的 weback.config.js )

5. 使 webpack 支持加載 css 的打包處理

1) 安裝 loader 加載器

npm install --save-dev css-loader style-loader

3) 配置 webpack.config.js

在 module.rules[] 數組中，增長一個 loader 配置對象

2) 編寫 test.css

3) 引入 css

 

4) css-loader 加載 css 文件

而後 style-loader 將 css 模塊以 style 標籤的形式生效

減小了資源請求

6. 使 webpack 支持加載 圖片 的打包處理

1) 安裝 圖片 加載器

npm install --save-dev file-loader url-loader

2) url-loader 

能夠將小於 8kb 的圖片 以 base64 處理圖片成字符串

執行 webpack 能夠看見圖片引入了，css 也生效了

7. 熱加載

1) 配置 output.publicPath 爲 html 的查找資源的路徑

2) npm install --save-dev webpack-dev-server

此時能夠執行一個命令： webpack-dev-server

讀取 package.json 配置

內置一個 服務器 8080 的端口號

3) 配置 webpack.config.js

設置 bunder.js 做用於虛擬服務器的路徑下的 index.html   

// 默認服務於 根路徑下的 index.html

4) 註釋 contentBase 並將 html 移入 根路徑 進行開發，更科學

5) webpack-dev-server 的全部操做 都是在 dev 虛擬服務器中運行的

8. 打包生成 HTML5 文件

1) npm install --save-dev html-webpack-plugin clean-webpack-plugin

2) 引入並使用

3) 使用：

執行 webpack-dev-sever --open

會生成一個 index.html 文件在 dist

4) 原理

html-webpack-plugin 插件： 根據指定頁面 生成有一個新頁面

clean-webpack-plugin 插件： 會將目標文件夾，先清空，再生成資源文件