Webpack是什么

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

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

為什么使用Webpack

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

怎么安裝Webpack

安裝node.js

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

但是由于npm在國內下載的時候是很慢的，所以這里推薦一個替代npm的淘寶鏡像cnpm.之后npm安裝請使用cnpm！

命令行安裝：

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

安裝webpack

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

在項目中使用webpack

• 通過?npm init?實例化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?文件中，本地運行webpack服務。

怎么使用Webpack

1、安裝?webpack?后，可以使用?webpack?這個命令行工具。主要命令：?webpack <entry> <output>??？梢郧袚Q到包含webpack.config.js的目錄運行命令：

• webpack?執行一次開發時的編譯
• webpack -p?執行一次生成環境的編譯（壓縮）
• webpack --watch?在開發時持續監控增量編譯（很快）
• webpack -d?讓他生成SourceMaps
• webpack --progress?顯示編譯進度
• webpack --colors?顯示靜態資源的顏色
• webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by?將modules/chunks/assets進行列表排序
• webpack --display-chunks?展示編譯后的分塊
• webpack --display-reasons?顯示更多引用模塊原因
• webapck --display-error-details?顯示更多報錯信息

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

下面看一個簡單的示例：

var webpack = require('webpack');module.exports = {//插件項 plugins: [//提公用js到common.js文件中new webpack.optimize.CommonsChunkPlugin('common.js'),//將樣式統一發布到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?是頁面入口文件配置，可以是一個文件或者多個入口文件，可以是對象格式或者數組格式。

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

?

output

output?是對應輸出項配置,主要包括?path?,?filename?和?publishPath?屬性。?path?代表輸出的路徑，?filename?代表輸出的文件名稱，?publishPath?代表靜態資源發布后的前綴地址。

module.loaders

module.loaders?是最關鍵的一塊配置。它告知 webpack 每一種文件都需要使用什么加載器來處理。?點擊這里可以查看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的直接轉為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"其實是可以省略不寫的，多個loader之間用“!”連接起來。

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

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

npm install url-loader -save-dev

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

plugins

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

plugins: [//提公用js到common.js文件中new webpack.optimize.CommonsChunkPlugin('common.js'),//將樣式統一發布到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時省略的擴展名，如：require('module') 不需要module.jsextension: ['', '.js'],//別名 alias: {filter: path.join(__dirname, 'src/filters')} }

使用Webpack-dev-server

webpack-dev-server?是基于node.js Express服務，它同時包含了一個基于?Socket.IO?輕量的運行時環境。

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

?

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

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>

?

總結

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

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

轉載于:https://www.cnblogs.com/wymbk/p/6172208.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。