Webpack前端打包工具

時間 2019-11-06

標籤 webpack 前端打包工具简体版

原文原文鏈接

1、安裝

安裝Webpack以前須要安裝nodejs，而後用npm安裝:css

$ npm install webpack -g

&nsbp;運行以上命令就將Webpack安裝到了全局環境中。
可是一般咱們會將Webpack只安裝到項目的依賴中:html

$ cd /www/webpack_demo1      // 進入項目目錄，確保該目錄下存在有package.json文件,該文件以後會講到 $ npm install webpack --save-dev // 安裝webpack依賴

2、使用

首先建立一個index.html和entry.js文件：node

// index.html
<html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> // 注意這裏是bundle.js不是entry.js </body> </html>

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

而後編譯 entry.js 並打包到 bundle.js：webpack

$ webpack entry.js bundle.js

而後用瀏覽器打開會看到It works
接下來添加一個模塊module.js，並修改入口entry.js:web

// 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.
Webpack 會分析入口文件，解析包含依賴關係的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每一個模塊分配一個惟一的 id 並經過這個 id 索引和訪問模塊。在頁面啓動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。正則表達式

3、Loader

Webpack自己只能處理js模塊，若是要加載css\img...等靜態資源就須要使用Loader轉換
Loader能夠理解爲模塊和資源的加載器，它自己是一個函數，接受源文件爲參數而後轉換並返回。這樣咱們就能夠經過require加載任何類型的模塊或文件。 Loader的特性:npm

能夠經過管道方式鏈式調用，每一個 loader 能夠把資源轉換成任意格式並傳遞給下一個 loader ，可是最後一個 loader 必須返回 JavaScript。
Loader 能夠同步或異步執行。
Loader 運行在 node.js 環境中，因此能夠作任何可能的事情。
Loader 能夠接受參數，以此來傳遞配置項給 loader。
Loader 能夠經過文件擴展名（或正則表達式）綁定給不一樣類型的文件。
Loader 能夠經過 npm 發佈和安裝。
除了經過 package.json 的 main 指定，一般的模塊也能夠導出一個 loader 來使用。
Loader 能夠訪問配置。
插件可讓 loader 擁有更多特性。
Loader 能夠分發出附加的任意文件。

  慣例loader通常是xxx-loader格式，eg: css-loader。在引用loader的時候能夠使用簡寫: json-loader能夠寫json。
  Loader能夠在require()引用模塊的時候添加，也能夠在webpac全局配置中進行綁定，還能夠經過命令行的方式使用。
  下面來講明下loader怎麼用   咱們在頁面中引入一個style.css文件，首頁將style.css當作一個模塊，使用css-loader讀取它，再用style-loader把它插入到頁面json

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

修改entry.js瀏覽器

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

安裝loader：異步

$ npm install css-loader style-loader // 我在這裏安裝的時候貌似報了個錯，後邊加-g指定全局安裝就行了

  從新編譯打包能夠看到頁面背景顏色發生了變化
  若是每次require CSS文件的時候都要寫loader前綴，很麻煩，咱們能夠根據模塊類型(擴展名)來自動綁定需求的loader。
  將entry.js中的require("!style!css!./style.css") 修改成require("./style.css"),而後執行:

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

這兩種方式效果是同樣的。

4、配置文件

Webpack處理在命令行中指定參數還能夠經過制定配置文件來執行。默認狀況下會搜索當前目錄的webpack.config.js文件，這個文件是一個node.js模塊，返回一個json格式的配置信息對象，或經過 --config 選項來指定配置文件。

在項目中建立package.json（package.json是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init命令能夠自動建立這個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": "orlion", "license": "MIT", "devDependencies": { "css-loader": "^0.21.0", "style-loader": "^0.13.0", "webpack": "^1.12.2" } }

而後運行:

npm 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-loader!css-loader'} ] } }

同時簡化entry.js與style.css加載方式:

require('./style.css')

5、插件

  插件能夠完成loader不能完成的功能
  插件的使用通常是在webpack的配置信息plugins選項中指定。
  Webpack自己內置了一些經常使用的插件，下面咱們利用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-loader!css-loader'} ] }, 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 = {}; ...

相關標籤/搜索

每日一句

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