Webpack:前端資源模塊化管理和打包工具

時間 2019-11-20

標籤 webpack 前端資源模塊化管理打包工具简体版

原文原文鏈接

一.介紹：css

　　　　Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生html

　　產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉前端

　　換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、　　webpack

　　Coffeescript、 LESS等。web

　　　　Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的express

　　靜態資源。npm

二.Webpack 和其餘模塊化工具備什麼區別呢？json

　　1.代碼拆分：瀏覽器

　　2.Loader:緩存

　　3.智能解析：

　　4.插件系統：

　　5.快速運行：

三.安裝使用：

　　1.用 cnpm 全局安裝 Webpack： cnpm install webpack -g

　　2.本地安裝使用：cnpm install webpack --save-dev

　　3.項目初始化：

　　　　（1）.創建mywebpack文件夾並初始化項目：C:\mywebpack>npm init

　　　　（2）.若是不是實際項目能夠一路回車完成初始化，安裝本地webpack：C:\mywebpack>cnpm install webpack --save-dev 完成安裝。可使用 C:\mywebpack>dnpm info webpack 查看webpack 的版

　　　　　　本；也能夠看到package.json中例如：

　　　　　　　　"devDependencies": {
　　　　　　　　　　"webpack": "^1.14.0"
　　　　　　　　　}

　　　　　　　　webpack安裝成功！

　　　　（3）.使用webpack:

　　　　　　　首先建立一個靜態頁面 index.html 和一個 JS 入口文件 entry.js：　　　　　　　

　　　　　　　　<!-- index.html --> 　　　　　　　　<html> 　　　　　　　　<head> 　　　　　　　 　　<meta charset="utf-8"> 　　　　　　　　</head> 　　　　　　　　<body> 　　　　　　　　　 <script src="bundle.js"></script> 　　　　　　　　</body> 　　　　　　</html>

　　　　　　// entry.js 　　　　　　document.write('It works.')

　　　　　　而後編譯 entry.js 並打包到 bundle.js: C:\mywebpack> webpack entry.js bundle.js

　　　　　　用瀏覽器打開 index.html 將會看到 It works.　　　　　

　　　　　　接下來添加一個模塊 module.js 並修改入口 entry.js：

　　　　　　// module.js 　　　　　　module.exports = 'It works from module.js.'

　　　　　　// entry.js 　　　　　　document.write('It works.') 　　　　　　document.write(require('./module.js')) // 添加模塊

　　　　　　從新打包 webpack entry.js bundle.js 後刷新頁面看到變化 It works.It works from module.js.

　　　　（4）.Loader：Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader

　　　　　　　　進行轉換。

　　　　　　上一節的例子，咱們要在頁面中引入一個 CSS 文件 style.css，首頁將 style.css 也當作是一個模塊，

　　　　　　而後用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中　　

　　　　　　/* style.css */ 　　　　　　body { background: yellow; }

　　　　　　修改 entry.js：

　　　　　　　　　　　　require("!style!css!./style.css") // 載入 style.css 　　　　　　document.write('It works.') 　　　　　　document.write(require('./module.js'))

　　　　　　安裝 loader：

　　　　　　C:\mywebpack>cnpm install css-loader style-loader

　　　　　　若是每次  CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。咱們能夠根據模塊類型（擴展名）來自動綁定須要的 loader。　　　　　　從新編譯打包，刷新頁面，就能夠看到黃色的頁面背景了。
　　　　　　

require

　　　　　　將 entry.js 中的 require("!style!css!./style.css") 修改成 require("./style.css") ，而後執行：

　　　　　　　　$ webpack entry.js bundle.js --module-bind 'css=style!css' 　　　　　　# 有些環境下可能須要使用雙引號 　　　　　　　　$ webpack entry.js bundle.js --module-bind "css=style!css"

　　　　　　顯然，這兩種使用 loader 的方式，效果是同樣的。

　　　　（5）.配置文件：繼續咱們的案例，在根目錄建立 package.json 來添加 webpack 須要的依賴。　　　

　　　　　　　{
 　　　　　　　　"name": "webpack-example", 　　　　　　　　"version": "1.0.0", 　　　　　　　　"description": "A simple webpack example.", 　　　　　　　　"main": "bundle.js", 　　　　　　　　 "scripts": { 　　　　　　　 　　"test": "echo \"Error: no test specified\" && exit 1" 　　　　　　　　 }, 　　　　　　　　"keywords": [ 　　　　　　　　　　"webpack" 　　　　　　　　], 　　　　　　　　"author": "", 　　　　　　　　"license": "ISC", 　　　　　　　　"devDependencies": { 　　　　　　　　　　"css-loader": "^0.21.0", 　　　　　　　　　　"style-loader": "^0.13.0", 　　　　　　　　　　"webpack": "^1.12.2" 　　　　　　　　　} 　　　　　　　　}

　　　　　　運行C:\mywebpack>cnpm install

　　　　　　而後建立一個配置文件 webpack.config.js：

　　　　　　　　var webpack = require('webpack') 　　　　　　　　module.exports = { 　　　　　　　　entry: './entry.js', 　　　　　　　　output: { 　　　　　　　　path: __dirname, 　　　　　　　　filename: 'bundle.js' 　　　　　　　　}, 　　　　　　　　 module: { 　　　　　　　　　loaders: [ 　　　　　　　　　　{test: /\.css$/, loader: 'style!css'} 　　　　　　　　　] 　　　　　　　　} 　　　　　　　　}

　　　　　　同時簡化 entry.js 中的 style.css 加載方式：

　　　　　　require('./style.css')

　　　　　　webpack 經過配置文件執行的結果和上一章節經過命令行 :

　　　　　　C:\mywebpack>webpack entry.js bundle.js --module-bind 'css=style!css' 執行的結果是同樣的.

　　　　（6）.插件：

　　　　　　接下來，咱們利用一個最簡單的 BannerPlugin 內置插件來實踐插件的配置和運行，這個插件的做用是給輸出

　　　　的文件頭部添加註釋信息。　　　　　

　　　　　　修改 webpack.config.js，添加 plugins：

　　　　　　　　var webpack = require('webpack') 　　　　　　　　module.exports = { 　　　　　　　　entry: './entry.js', 　　　　　　　　output: { 　　　　　　　　 path: __dirname, 　　　　　　　　 filename: 'bundle.js' 　　　　　　　　 }, 　　　　　　　　module: { 　　　　　　　　loaders: [ 　　　　　　　　{test: /\.css$/, loader: 'style!css'} 　　　　　　　　 ] 　　　　　　　　}, 　　　　　　　　plugins: [ 　　　　　　　　new webpack.BannerPlugin('This file is created by zhaoda') 　　　　　　　　] 　　　　　　　　}

　　　　　　而後運行 webpack，打開 bundle.js，能夠看到文件頭部出現了咱們指定的註釋信息：

　　　　　　　　　　/*! This file is created by zhaoda */ 　　　　　　　　　　/******/ (function(modules) { // webpackBootstrap 　　　　　　　　　　/******/ // The module cache 　　　　　　　　　　/******/ var installedModules = {}; 　　　　　　　　　　// 後面代碼省略

　　　　（7）.開發環境：

　　　　　　　　當項目逐漸變大，webpack 的編譯時間會變長，能夠經過參數讓編譯的輸出內容帶有進度和顏色：

　　　　　　　　　　C:\mywebpack>webpack --progress --colors

　　　　　　　　若是不想每次修改模塊後都從新編譯，那麼能夠啓動監聽模式。開啓監聽模式後，沒有變化的模塊會在編

　　　　　　　譯後緩存到內存中，而不會每次都被從新編譯，因此監聽模式的總體速度是很快的。

　　　　　　　　　　C:\mywebpack>webpack --progress --colors --watch

　　　　　　　　使用 webpack-dev-server 開發服務是一個更好的選擇。它將在 localhost:8080 啓動一個 express 靜

　　　　　　態資源 web 服務器，而且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ 　

　　　　　　能夠瀏覽項目中的頁面和編譯後的資源輸出，而且經過一個 socket.io 服務實時監聽它們的變化並自動刷新

　　　　　　頁面。