webpack入门--前端必备
什么是?webpack？
webpack是一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。我們可以直接使用?require(XXX)?的形式來引入各模塊，即使它們可能需要經(jīng)過編譯（比如JSX和sass），但這不用我們理會(huì)，因?yàn)?webpack?有著各種健全的加載器（loader）在處理這些事情。
為什么要使用?webpack？
很簡(jiǎn)單的一個(gè)道理，難道寫react的同學(xué)會(huì)不用它么？
?安裝
首先你需要安裝有node(我的版本為v5.4.1)，然后執(zhí)行
$?npm?install?webpack?-g
當(dāng)然如果常規(guī)項(xiàng)目把依賴寫入?package.json?包更好：
$?npm?init
$?npm?install?webpack?--save-dev
?
我們?cè)陧?xiàng)目的根目錄中的package.json?可以看到：（其它包根據(jù)你的項(xiàng)目需要另外安裝）
?
{"name": "webpack","version": "1.0.0","description": "demo","main": "main.js","scripts": {"start": "webpack-dev-server","test": "echo \"Error: no test specified\" && exit 1"},"author": "RORO彥","license": "ISC","dependencies": {"react": "^0.14.6"},"devDependencies": {"webpack": "^1.12.13","webpack-dev-server": "^1.11.0","babel-core": "^6.4.5","babel-loader": "^6.2.1","css-loader": "^0.23.1","file-loader": "^0.8.5","jsx-loader": "^0.13.2","node-libs-browser": "^1.0.0","sass-loader": "^3.1.2","style-loader": "^0.13.0","url-loader": "^0.5.7"} }?
?
?
?
配置文件
創(chuàng)建我們webpack的配置文件webpack.config.js：（這個(gè)文件需要手碼的哦）
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = {entry: "./main.js",output: {path: './build', // 圖片和 JS 會(huì)打包到這里來filename: "bundle.js"},module: {loaders: [{test: /\.css$/,loader: "style-loader!css-loader"},{test: /\.less$/,loader: 'style-loader!css-loader!less-loader'}, // 用 ! 來連接多個(gè) loader{test: /\.(png|jpg)$/,loader: 'url-loader?limit=8192'} // 內(nèi)聯(lián) base64 URLs, 限定 <=8k 的圖片, 其他的用 URL]},resolve: {extensions: ['', '.js', '.json', 'coffee']},plugins: [new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin()]}對(duì)這個(gè)配置文件解釋下：
1)?entry：entry可以是個(gè)字符串或數(shù)組或者是對(duì)象。指定打包的入口文件，一個(gè)鍵值對(duì)，就是一個(gè)入口文件
2)?output：包結(jié)果文件的名稱,在這里我指定它在./build的文件夾打包輸出
3)?resolve：用于指明程序自動(dòng)補(bǔ)全識(shí)別哪些后綴,
?????注意一下,?extensions?第一個(gè)是空字符串!?對(duì)應(yīng)不需要后綴的情況.
4)?module：以及一些正則。當(dāng)需要加載的文件匹配test的正則時(shí)，就會(huì)調(diào)用后面的loader對(duì)文件進(jìn)行處理，這正是webpack強(qiáng)大的原因。
???1.js的引用
???比如這里定義了凡是.js結(jié)尾的文件都是用babel-loader做處理，而.jsx結(jié)尾的文件會(huì)先經(jīng)過jsx-loader處理，然后經(jīng)過babel-loader處理。當(dāng)然這些loader也需要通過npm?install安裝
???2.樣式及圖片的引用
require('./bootstrap.css'); require('./myapp.sass');?var?img = document.createElement('img'); img.src?= require('./glyph.png');
當(dāng)你引用?CSS(或者?SASS?吧),?Webpack?會(huì)將?CSS?內(nèi)聯(lián)到?JavaScript?包當(dāng)中,?require()?會(huì)在頁面當(dāng)中插入一個(gè)<style>標(biāo)簽.?當(dāng)你引入圖片,?Webpack?在包當(dāng)中插入對(duì)應(yīng)圖片的?URL,?這個(gè)?URL?是由require()返回,?而圖片可能被轉(zhuǎn)化成?base64?格式的?dataUrl。但是注意，所有這些要在?webpack.config.js?文件寫好對(duì)應(yīng)的?loader:
5)?plugins:?這里定義了需要使用的插件，
比如commonsPlugin在打包多個(gè)入口文件時(shí)會(huì)提取出公用的部分，生成common.js
這里還配置了NoErrorsPlugin插件，用來跳過編譯時(shí)出錯(cuò)的代碼并記錄，使編譯后運(yùn)行時(shí)的包不會(huì)發(fā)生錯(cuò)誤：當(dāng)然Webpack還有很多其他的配置，具體可以參照它的配置文檔
準(zhǔn)備
在項(xiàng)目的根目錄下新建一個(gè)index.html文件（如截圖），這個(gè)是入口文件中引入程序跑起來的一些必要的東西
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body> <script src="./build/bundle.js"></script> </body> </html>注意，這里面引用的bundle.js文件非常重要，他是我們打包后的入口文件，不引入它程序是跑不起來的。
運(yùn)行
在命令行中鍵入
webpack
當(dāng)你發(fā)現(xiàn)提示的是綠色就表明成功了。
?webpack?-p?來針對(duì)發(fā)布環(huán)境編譯(壓縮代碼)
?webpack?--watch?來進(jìn)行開發(fā)過程持續(xù)的增量編譯
?webpack?-d?來生成?SourceMaps
?
隨著項(xiàng)目的增長(zhǎng)，編譯過程可能會(huì)越來越長(zhǎng)，所以我們可以展示一些進(jìn)度條以及增加配色來實(shí)現(xiàn)更友好地輸出。我們可以通過以下命令達(dá)到目的：
?
webpack?--progress?--colors
開發(fā)服務(wù)器
提供開發(fā)服務(wù)器，啟用HTTP靜態(tài)服務(wù)器，通過以下命令全局安裝
npm?install?webpack-dev-server?-g
啟動(dòng)服務(wù)器
webpack-dev-server?--progress?--colors
這會(huì)綁定一個(gè)小型express服務(wù)器到localhost:8080，來為你的靜態(tài)資源及bundle（自動(dòng)編譯）服務(wù)。通過訪問http://localhost:8080/webpack-dev-server/bundle，bundle每次重編譯后瀏覽器頁面都會(huì)自動(dòng)更新。
?
缺陷
Webpack?的報(bào)錯(cuò)挺不友好的，把中間過程打印出來看是不錯(cuò)的選擇:
webpack?--display-error-details
小結(jié)
Webpack是我目前接觸到比較好的前端開發(fā)工具。很多功能之前在?FIS?文檔上看到過,?但?FIS?相對(duì)重一些我始終沒上手。這篇短文主要是關(guān)于webpack入門，讓你大概了解什么是webpack，怎么最簡(jiǎn)單地去使用這個(gè)工具，這個(gè)教程中并未涉及到react的知識(shí)，要一起說，實(shí)在太多了，?
webpack的官網(wǎng)是?http://webpack.github.io/?，
文檔地址是?http://webpack.github.io/docs/
from:?https://www.cnblogs.com/LIUYANZUO/p/5184424.html?
總結(jié)
以上是生活随笔為你收集整理的webpack入门--前端必备的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： webpack使用教程 翻译自阮一峰(机
- 下一篇： Vue.js 介绍