webpack入門級教程

首先能夠看下官方文檔,文檔是最好的老師。 這裏也有國外的一個朋友寫的入門介紹。
Webpack是由Tobias Koppers開發的一個開源前端模塊構建工具。它的基本功能是將以模塊格式書寫的多個JavaScript文件打包成一個文件,同時支持CommonJS和AMD格式。但讓它不同凡響的是,它提供了強大的loader API來定義對不一樣文件格式的預處理邏輯,從而讓咱們能夠將CSS、模板,甚至是自定義的文件格式當作JavaScript模塊來使用。Webpack 基於loader還能夠實現大量高級功能,好比自動分塊打包並按需加載、對圖片資源引用的自動定位、根據圖片大小決定是否用base64內聯、開發時的模塊熱替換等等,能夠說是目前前端構建領域最有競爭力的解決方案之一。
做用javascript

爲何使用Webpack

  • 他相似browserify 可是能夠把你的應用分離成許多文件,若是你有許多頁面在你的單頁應用裏面,用戶只須要下載當前頁面所須要的代碼。若是你跳轉到另外一個頁面,他們不須要從新加載通用的代碼。
  • 他能替代grunt或者gulp大部分的功能 由於他能夠構建和打包CSS,預處理CSS,編譯JS和打包處理圖片,甚至更多事情。
  • 他支持AMD和CommonJs以及其餘的模塊化系統(Angular,ES6)。若是你不知道用什麼,那麼能夠用CommonJs。

怎麼安裝Webpack

安裝node.js

首先須要安裝Node.js,node自帶了包管理工具npmphp

安裝webpack

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

在項目中使用webpack

  • 經過npm init實例化package.json文件。
  • 經過npm install webpack --save-dev安裝webpackpackage.json文件中。
  • 或者經過npm install webpack@1.2.x --save-dev安裝指定版本的webpackpackage.json文件中。
  • 經過npm install webpack-dev-server --save-dev安裝dev toolspackage.json文件中,本地運行webpack服務。

怎麼使用Webpack

一、安裝webpack後,可使用webpack這個命令行工具。主要命令:webpack <entry> <output>。能夠切換到包含webpack.config.js的目錄運行命令:html

  • 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 顯示更多報錯信息

二、每一個項目下都必須配置有一個 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是頁面入口文件配置,能夠是一個文件或者多個入口文件,能夠是對象格式或者數組格式。java

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

output

output 是對應輸出項配置,主要包括path,filenamepublishPath屬性。path表明輸出的路徑,filename表明輸出的文件名稱,publishPath表明靜態資源發佈後的前綴地址。node

module.loaders

module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都須要使用什麼加載器來處理。點擊這裏能夠查看loader listwebpack

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種使用方式:git

一、在頁面裏面引用資源使用
  • require("url-loader?mimetype=image/png!./file.png");github

    二、在webpack.config.js文件夾中使用
  • { test: /.png$/, loader: "url?mimetype=image/png" };

    三、在命令行中編譯使用
  • 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" }) ]

如上,包含兩種:
一、第一種webpack自帶的一些插件:webpack.ProvidePluginwebpack.optimize.CommonsChunkPlugin
二、另一種則經過npm包安裝的:ExtractTextPlugin

resolve

最後是 resolve 配置,這塊很好理解,直接寫註釋了:

resolve: { // require時省略的擴展名,如:require('module') 不須要module.js extension: ['', '.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);

如上,引用webpackwebpack-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進行打包處理。

相關文章
相關標籤/搜索