Webpack入門教程

時間  2019-11-18
標籤 webpack 入門 教程 简体版
原文   原文鏈接

寫在前面javascript

　　閱讀本文以前，先看下面這個webpack的配置文件，若是每一項你都懂，那本文能帶給你的收穫也許就比較有限，你能夠快速瀏覽或直接跳過；若是你和十天前的我同樣，對不少選項存在着疑惑，那花一段時間慢慢閱讀本文，你的疑惑必定一個一個都會消失；若是你之前沒怎麼接觸過webpack，而你又對webpack感興趣，那麼動手跟着本文中那個貫穿始終的例子寫一次，寫完之後你會發現你已明明白白的走進了webpack的大門。css

 1 //一個常見的Webpack配置文件
 2 var webpack = require('webpack');
 3 var HtmlWebpackPlugin = require('html-webpack-plugin');
 4 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 
 6 module.exports = {
 7   entry: __dirname + "/app/main.js",
 8   output: {
 9     path: __dirname + "/build",
10     filename: "[name]-[hash].js"
11   },
12 
13   module: {
14     loaders: [
15       {
16         test: /\.json$/,
17         loader: "json"
18       },
19       {
20         test: /\.js$/,
21         exclude: /node_modules/,
22         loader: 'babel'
23       },
24       {
25         test: /\.css$/,
26         loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
27       }
28     ]
29   },
30   postcss: [
31     require('autoprefixer')
32   ],
33 
34   plugins: [
35     new HtmlWebpackPlugin({
36       template: __dirname + "/app/index.tmpl.html"
37     }),
38     new webpack.optimize.OccurenceOrderPlugin(),
39     new webpack.optimize.UglifyJsPlugin(),
40     new ExtractTextPlugin("[name]-[hash].css")
41   ]
42 }
View Code

Webpack介紹html

1、爲何使用webpack？前端

　　現今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法：java

  • 模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
  • 相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器能夠識別；
  • Scss，less等CSS預處理器；
  • ...

　　這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別，而手動處理又是很是繁瑣的，這就爲webpack等工具的出現提供了需求。node

2、什麼是webpack？webpack

　　若是說它是一個打包工具那真的是有點大材小用了。我我的認爲webpack是一個集前端自動化、模塊化、組件化於一體的可拓展系統，你能夠根據本身的須要來進行一系列的配置和安裝，最終實現你須要的功能並進行打包輸出。web

　　webpack的工做方式是：把咱們的項目當作一個總體，經過一個給定的主文件（如：index.js），webpack將從這個文件開始找到項目的全部依賴文件，使用loaders處理它們，最後打包爲一個或多個瀏覽器可識別的JavaScript文件。npm

　　這麼解釋對於新手來說，可能仍是沒有什麼概念，不過不要着急，繼續日後看，當你學會了該如何使用它時，再回來研究它的概念，相信會有不同的理解。json

3、安裝webpack

　　安裝webpack以前，須要確保電腦已經配置了node.js環境，若是沒有，能夠點擊這裏安裝node.js。

　　webpack的安裝分兩種方式：全局安裝和安裝到項目目錄中，至於這兩種方式有什麼區別，我尚未研究。

1 // 全局安裝
2 nam install -g webpack
3 // 安裝到項目目錄
4 npm install --save-dev webpack
View Code

使用Webpack

1、簡單使用

　　1.開始使用以前，咱們須要準備好咱們的示例程序。首先初始化項目，而且安裝webpack到項目目錄中。

1 mkdir demo && cd demo  // 新建項目名稱爲demo的文件夾
2 nam init  // 初始化package.json
3 npm install --save-dev webpack  // 安裝webpack到項目目錄中
View Code

　　其中package.json是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init命令能夠自動建立這個package.json文件，輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是你不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可。或者能夠直接輸入命令npm init -y來跳過這些詢問。

　　2.回到demo文件夾中，並在裏面建立兩個文件夾，app文件夾和public文件夾，app文件夾用來存放原始數據和咱們將寫的JavaScript模塊，public文件夾用來存放準備給瀏覽器讀取的數據（包括使用webpack生成的打包後的js文件以及一個index.html文件）。在這裏還須要建立三個文件，index.html文件放在public文件夾中，兩個js文件（Greeter.js和main.js）放在app文件夾中。此時項目結構以下圖所示（其中node_modules用來存放項目所依賴的模塊包，剛纔的webpack其實也就是安裝到了這裏，無需手動建立）：

　　index.html文件只有最基礎的html代碼，它惟一的目的就是加載打包後的js文件（bundle.js）。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Webpack Sample Project</title>
 6 </head>
 7 <body>
 8 <div id="root"></div>
 9 <script type="text/javascript" src="bundle.js"></script>
10 </body>
11 </html>
View Code

　　Greeter.js只包括一個用來返回包含問候信息的html元素的函數。

1 // Greeter.js
2 module.exports = function() {
3   var greet = document.createElement('div');
4   greet.textContent = "Hi there and greetings!";
5   return greet;
6 };
View Code

　　main.js用來把Greeter模塊返回的節點插入頁面。

1 //main.js 
2 var greeter = require('./Greeter.js');
3 document.getElementById('root').appendChild(greeter());
View Code

　　3.示例程序已經準備好了，下面就是利用webpack將Greeter.js和main.js進行打包了。

　　webpack能夠在終端中使用，其最基礎的命令是：

1 webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}
View Code

　　只須要指定一個入口文件，webpack將自動識別項目所依賴的其它文件，不過須要注意的是若是你的webpack沒有進行全局安裝，那麼當你在終端中使用此命令時，須要額外指定其在node_modules中的地址。繼續上面的例子，在終端中屬於以下命令：

1 //webpack非全局安裝的狀況
2 node_modules/.bin/webpack app/main.js public/bundle.js
View Code

　　若是看到以下結果，則說明打包成功了：

　　能夠看出webpack同時將main.js和Greeter.js打包到一個文件bundle.js中了。如今就能夠訪問index.html，你的瀏覽器確定可以顯示出Hi there and greetings!了。

　　有沒有很激動，如今咱們已經成功的使用webpack打包了一個文件了。不過若是在終端中進行復雜的操做，仍是不太方便且容易出錯的，接下來看看webpack的另外一種使用方法。

2、經過配置文件使用webpack

　　webpack擁有不少其它的比較高級的功能（好比說loaders和plugins），這些功能其實均可以經過命令行模式實現，可是正如已經提到的，這樣不太方便且容易出錯，一個更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，能夠把全部的與構建相關的信息放在裏面。

　　仍是繼續上面的例子來講明如何寫這個配置文件，在demo文件夾的根目錄下新建一個名爲webpack.config.js的文件，並在其中進行最簡單的配置，以下所示，它包含入口文件路徑和打包後的文件路徑。

1 module.exports = {
2   entry:  __dirname + "/app/main.js",  // 入口文件
3   output: {
4     path: __dirname + "/public",  // 打包後文件的存放路徑
5     filename: "bundle.js"  // 打包後文件的文件名
6   }
7 }
View Code

　　注：「__dirname」是Node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

　　如今若是你須要打包文件，只須要在終端裏運行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就能夠了，這條命令會自動參考webpack.config.js文件中的配置選項打包你的項目。

　　這裏須要對入口文件的配置作一個特別說明。

　　Entry的做用是告訴webpack的根模塊，或者提及點在哪。值能夠是String，Array或者Object。這裏可能會讓你困惑，可是不一樣的類型有各自的用武之地。

　　若是隻有一個entry（大部分APP都是），能夠選擇任何格式，結果都是同樣的。

 1 // String
 2 module.exports = {
 3   entry: __dirname + "/app/main.js",
 4   output: {
 5     path: __dirname + "/public",
 6     filename: "bundle.js"
 7   }
 8 }
 9 
10 // Array
11 module.exports = {
12   entry: [__dirname + "/app/main.js"],
13   output: {
14     path: __dirname + "/public",
15     filename: "bundle.js"
16   }
17 }
18 
19 // Object
20 module.exports = {
21   entry: {
22     index: __dirname + "/app/main.js"
23   },
24   output: {
25     path: __dirname + "/public",
26     filename: "bundle.js"
27   }
28 }
View Code

　　若是你想添加多個文件而且這些文件之間沒有相互依賴的話，可使用Array格式。這個時候main.js以及main.js所依賴的全部模塊和test.js會一塊兒被打包到bundle.js中，只不過test.js中的內容會放到bundle.js的最後。

1 module.exports = {
2   entry: [__dirname + "/app/main.js", __dirname + "/app/test.js"],
3   output: {
4     path: __dirname + "/public",
5     filename: "bundle.js"
6   }
7 }
View Code

　　另外，假設你有一個真正的多頁應用，而不是一個多頁面的SPA。有多個html文件（index.html和profile.html）。而後能夠經過對象形式的entry來讓webpack一次性生成多個包。這個時候entry對象的key將會做爲打包生成的文件名。而後咱們在須要的html頁面中嵌入須要的打包文件就行了。

 1 module.exports = {
 2   entry: {
 3       index: __dirname + "/app/main.js",
 4       profile: __dirname + "/app/test.js"
 5   },
 6   output: {
 7     path: __dirname + "/public",
 8     filename: "[name].js"
 9   }
10 }
View Code

　　固然，它們三者也是能夠組合使用的。

 1 module.exports = {
 2   entry: {
 3       index: __dirname + "/app/main.js",
 4       profile: __dirname + "/app/test.js",
 5       page: [__dirname + "/app/page1.js", __dirname + "/app/page2.js"]
 6   },
 7   output: {
 8     path: __dirname + "/public",
 9     filename: "[name].js"
10   }
11 }
View Code

　　好了，關於webpack的基礎使用，就先整理到這裏，後續再補充一些比較強大的功能。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程