Webpack是什么

首先可以看下?官方文檔?，文檔是最好的老師。

Webpack是由Tobias Koppers開發(fā)的一個(gè)開源前端模塊構(gòu)建工具。它的基本功能是將以模塊格式書寫的多個(gè)JavaScript文件打包成一個(gè)文件，同時(shí)支持CommonJS和AMD格式。但讓它與眾不同的是，它提供了強(qiáng)大的loader API來定義對(duì)不同文件格式的預(yù)處理邏輯，從而讓我們可以將CSS、模板，甚至是自定義的文件格式當(dāng)做JavaScript模塊來使用。Webpack 基于loader還可以實(shí)現(xiàn)大量高級(jí)功能，比如自動(dòng)分塊打包并按需加載、對(duì)圖片資源引用的自動(dòng)定位、根據(jù)圖片大小決定是否用base64內(nèi)聯(lián)、開發(fā)時(shí)的模塊熱替換等等，可以說是目前前端構(gòu)建領(lǐng)域最有競(jìng)爭(zhēng)力的解決方案之一。

為什么使用Webpack

• 他類似browserify 但是可以把你的應(yīng)用分離成許多文件，如果你有許多頁面在你的單頁應(yīng)用里面，用戶只需要下載當(dāng)前頁面所需要的代碼。如果你跳轉(zhuǎn)到另一個(gè)頁面，他們不需要重新加載通用的代碼。
• 他能替代grunt或者gulp大部分的功能 因?yàn)樗梢詷?gòu)建和打包CSS，預(yù)處理CSS，編譯JS和打包處理圖片，甚至更多事情。
• 他支持AMD和CommonJs以及其他的模塊化系統(tǒng)（Angular，ES6）。如果你不知道用什么，那么可以用CommonJs。

怎么安裝Webpack

安裝node.js

首先需要安裝?Node.js?，node自帶了包管理工具?npm?。

但是由于npm在國(guó)內(nèi)下載的時(shí)候是很慢的，所以這里推薦一個(gè)替代npm的淘寶鏡像cnpm.之后npm安裝請(qǐng)使用cnpm！

命令行安裝：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝webpack

使用?npm install webpack -g?，webpack全局安裝到了本地環(huán)境中，就可以使用?webpack?命令了。

在項(xiàng)目中使用webpack

• 通過?npm init?實(shí)例化package.json文件。
• 通過?npm install webpack --save-dev?安裝?webpack?到?package.json?文件中。
• 或者通過?npm install webpack@1.2.x --save-dev?安裝指定版本的?webpack?到?package.json?文件中。
• 通過?npm install webpack-dev-server --save-dev?安裝?dev tools?到?package.json?文件中，本地運(yùn)行webpack服務(wù)。

怎么使用Webpack

1、安裝?webpack?后，可以使用?webpack?這個(gè)命令行工具。主要命令：?webpack <entry> <output>?。可以切換到包含webpack.config.js的目錄運(yùn)行命令：

• webpack?執(zhí)行一次開發(fā)時(shí)的編譯
• webpack -p?執(zhí)行一次生成環(huán)境的編譯（壓縮）
• webpack --watch?在開發(fā)時(shí)持續(xù)監(jiān)控增量編譯（很快）
• webpack -d?讓他生成SourceMaps
• webpack --progress?顯示編譯進(jìn)度
• webpack --colors?顯示靜態(tài)資源的顏色
• webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by?將modules/chunks/assets進(jìn)行列表排序
• webpack --display-chunks?展示編譯后的分塊
• webpack --display-reasons?顯示更多引用模塊原因
• webapck --display-error-details?顯示更多報(bào)錯(cuò)信息

2、每個(gè)項(xiàng)目下都必須配置有一個(gè)?webpack.config.js?，它的作用如同常規(guī)的?gulpfile.js/Gruntfile.js?，就是一個(gè)配置項(xiàng)，告訴 webpack 它需要做什么。

下面看一個(gè)簡(jiǎn)單的示例：

var webpack = require('webpack');module.exports = {//插件項(xiàng) plugins: [//提公用js到common.js文件中new webpack.optimize.CommonsChunkPlugin('common.js'),//將樣式統(tǒng)一發(fā)布到style.css中new ExtractTextPlugin("style.css", {allChunks: true,disable: false}),//使用ProvidePlugin加載使用頻率高的模塊new webpack.ProvidePlugin({$: "webpack-zepto"})],//頁面入口文件配置 entry: {index : './src/main.js'},//入口文件輸出配置 output: {path: __dirname +'/dist/',filename: '[name].js'},module: {//加載器配置 loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' },{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}]},//其它解決方案配置 resolve: {extensions: ['', '.js', '.json', '.scss'],alias: {filter: path.join(__dirname, 'src/filters')}} };

entry

entry?是頁面入口文件配置，可以是一個(gè)文件或者多個(gè)入口文件，可以是對(duì)象格式或者數(shù)組格式。

entry: {index : './src/main.js' } entry:['./src/main.js','./src/index.js']

?

output

output?是對(duì)應(yīng)輸出項(xiàng)配置,主要包括?path?,?filename?和?publishPath?屬性。?path?代表輸出的路徑，?filename?代表輸出的文件名稱，?publishPath?代表靜態(tài)資源發(fā)布后的前綴地址。

module.loaders

module.loaders?是最關(guān)鍵的一塊配置。它告知 webpack 每一種文件都需要使用什么加載器來處理。?點(diǎn)擊這里可以查看loader list?。

module: {//加載器配置 loaders: [//.css 文件使用 style-loader 和 css-loader 來處理{ test: /\.css$/, loader: 'style-loader!css-loader' },//.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},//圖片文件使用 url-loader 來處理，小于8kb的直接轉(zhuǎn)為base64{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}] }

?

loader主要有3種使用方式：

1、在頁面里面引用資源使用

• require("url-loader?mimetype=image/png!./file.png");

  2、在webpack.config.js文件夾中使用

• { test: /.png$/, loader: "url?mimetype=image/png" };

  3、在命令行中編譯使用

• webpack --module-bind "png=url-loader?mimetype=image/png";

如上，"-loader"其實(shí)是可以省略不寫的，多個(gè)loader之間用“!”連接起來。

注意所有的加載器都需要通過 npm 來加載，并建議查閱它們對(duì)應(yīng)的 readme 來看看如何使用。

拿最后一個(gè) url-loader 來說，它會(huì)將樣式中引用到的圖片轉(zhuǎn)為模塊來處理，使用該加載器需要先進(jìn)行安裝：

npm install url-loader -save-dev

配置信息的參數(shù)“?limit=8192”表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式（其實(shí)應(yīng)該說超過8kb的才使用 url-loader 來映射到文件，否則轉(zhuǎn)為data url形式）。也可以使用file-loader來加載資源文件。

plugins

plugins?是插件項(xiàng)，這里我們使用了一個(gè) CommonsChunkPlugin 的插件，它用于提取多個(gè)入口文件的公共腳本部分，然后生成一個(gè) common.js 來方便多頁面之間進(jìn)行復(fù)用。?點(diǎn)擊這里可以查看plugins list?。

plugins: [//提公用js到common.js文件中new webpack.optimize.CommonsChunkPlugin('common.js'),//將樣式統(tǒng)一發(fā)布到style.css中new ExtractTextPlugin("style.css", {allChunks: true,disable: false}),//使用ProvidePlugin加載使用頻率高的模塊new webpack.ProvidePlugin({$: "webpack-zepto"}) ]

如上，包含兩種：

1、第一種webpack自帶的一些插件：?webpack.ProvidePlugin?、?webpack.optimize.CommonsChunkPlugin?，

2、另外一種則通過?npm?包安裝的：?ExtractTextPlugin?。

resolve

最后是 resolve 配置，這塊很好理解，直接寫注釋了：

resolve: {// require時(shí)省略的擴(kuò)展名，如：require('module') 不需要module.jsextension: ['', '.js'],//別名 alias: {filter: path.join(__dirname, 'src/filters')} }

使用Webpack-dev-server

webpack-dev-server?是基于node.js Express服務(wù)，它同時(shí)包含了一個(gè)基于?Socket.IO?輕量的運(yùn)行時(shí)環(huán)境。

'use strict' var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var config = require('./webpack.config'); // 配置代碼自動(dòng)編譯和熱替換插件 config.entry.unshift('webpack-dev-server/client?http://localhost:9090', "webpack/hot/dev-server"); config.plugins.push(new webpack.HotModuleReplacementPlugin()); // 這里配置：請(qǐng)求http://localhost:9090/index.php， // 相當(dāng)于通過本地node服務(wù)代理請(qǐng)求到了http://testapi.uhouzz.com/index.php var proxy = [{path: "/index.php/*",target: "http://pc.uhouzz.com",host: "pc.uhouzz.com" }] //啟動(dòng)服務(wù) var app = new WebpackDevServer(webpack(config), {publicPath: config.output.publicPath,hot:true,historyApiFallback: true,proxy:proxy }); app.listen(9090);

?

如上，引用?webpack?和?webpack-dev-server?模塊，通過WebpackDevServer啟動(dòng)服務(wù)，通過?HotModuleReplacementPlugin?插件啟動(dòng)代碼自動(dòng)編譯頁面自動(dòng)刷新。這樣，當(dāng)你修改了html、js或者樣式文件，頁面會(huì)自動(dòng)編譯刷新。

html頁面使用

直接在頁面引入 webpack 最終生成的頁面腳本和樣式文件即可。

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>webpack test</title><link rel="stylesheet" href="/dist/style.css"> </head><body><div id="app"></div><script src="/dist/common.js"></script><script src="/dist/build.js"></script> </body> </html>

?

總結(jié)

基于 webpack 的入門教程就到這里，希望本文能對(duì)你有所幫助，你也可以參考下面的項(xiàng)目進(jìn)行參考。

Vue-cnodejs?,基于Vue.js重寫的cnodejs的webapp,其中采用的webpack進(jìn)行打包處理。

轉(zhuǎn)載于:https://www.cnblogs.com/wymbk/p/6172208.html

總結(jié)

以上是生活随笔為你收集整理的webpack的安装和使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。