話說前頭

  • webpack前段時間有聽說一下，現(xiàn)在已經到了3.x的版本，自己沒去接觸。因為之前使用gulp來作為自己的項目構建工具?，F(xiàn)在感覺gulp使用的趨勢在減少?，F(xiàn)在這段時間去接觸了webpack，感覺很不錯，它的模塊化打包機制，對前端開發(fā)和性能方面都帶來好處。這里不是說gulp不好，兩者不作比較

  • 接下來會說說自己對webpack使用的感受，我不會一步步寫出使用webpack的流程，因為關于webpack的教程有很多，但會寫一些關鍵地方，注意地方，來加深對webpack的見解。

  • 學習就是這樣，東看看西看看，看人家的對某件東西的見解，加上自己的理解，是否異同，慢慢積累，最終成為自己的知識。

webpack介紹

1.（引用了webpack官網的一句話）：

webpack 是一個現(xiàn)代 JavaScript 應用程序的模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成少量的 bundle - 通常只有一個，由瀏覽器加載。
它是高度可配置的，但是，在開始前你需要先理解四個核心概念：入口(entry)、輸出(output)、loader、插件(plugins)。

2.個人理解：

這里說了這么多就是它能把項目中資源文件看成一個個模塊，然后將他們打包成少量或一個文件，然后我們去引用這文件。

3.疑惑：

大家這里可能會疑惑，當時我也想，怎么能做到這個？怎么就打包成一個文件了？那么js，css，圖片什么的怎么搞？還有這種操作？我能怎么辦，那只能選擇相信它。

4.感受：

其實學習某一樣工具，我們只需要知道這東西能做什么，然后怎么用它，但它具體實現(xiàn)的細節(jié)，有時我們不必深究。我們只需知其然，不必知其所以然。盡管去用這個東西，它本來就是一個工具。就好比開一輛車，我們只需去學習怎么開，而不用太在意他為什么能開，開多了一樣成為老司機，不是嗎，沒毛病吧。工具它能給我們帶來便利，就足夠了。除非你是制造工具的。但是如果對webpack非常感興趣，可以去它的github上看看。

webpack能做的事：

上面說webpack能打包模塊，其實還有很多功能。

  • webpack可以對Js進行轉譯，當前瀏覽器很多不支持es6，但是我們想使用es6的語法，webpack可以將es6語法轉成es5語法

  • webpack可以對less，sass，stylus等css的預處理語言進行轉譯

  • webpack可以熱更新

  • webpack可以對圖片處理，壓縮，轉成base64格式。

  • webpack可以對代碼進行壓縮。

  • webpack可以進行語法檢查，可以生成自動化html模板等等

上面舉例是常用，其功能還多得多。都是通過webpack 的 loader和plugins實現(xiàn)的，可以說是很強大了。

webpack安裝：

  1. 前提有nodejs和npm，在網上搜索安裝，現(xiàn)在的nodejs都會帶有npm，所以直接安裝nodejs即可。

  2. 通過 cmd（用的是win操作系統(tǒng)）運行：node -v 和 npm -v 若都能返回版本號表明安裝成功。

  3. 接著正式安裝webpack,命令行中運行：

    //全局安裝npm install -g webpack//創(chuàng)建一個文件夾mkdir webpack-demo//進入項目中cd webpack-demo//初始化，生成默認package.json 文件npm init -y//在當前項目中安裝webpacknpm install webpack --save-dev//到這里就安裝成功了

    感受：整個流程和安裝gulp差不多，是npm模塊的那套安裝流程。
    說到npm，在國內推薦使用cnpm淘寶鏡像，很不錯，速度快很多。還有可以逛npm的官網去查詢自己想要看的模塊，里面都有模塊的詳細介紹。

webpack的關鍵文件:webpack.config.js

  • webpack.config.js是webpack的配置文件，對項目中的webpack進行配置。

  • 文件中用到的插件和loader需要先試用npm安裝好：

    // 安裝css-loader
npm install css-loader  --save-dev// 安裝htmlWebpackPlugin
npm install html-webpack-plugin --save-dev

  • 項目根目錄新建簡單的webpack.config.js文件：

    //引入模塊const webpack = require('webpack'); 
const path = require('path');const htmlWebpackPlugin = require('html-webpack-plugin');//配置const config = {
  entry: './path/to/my/entry/file.js',
  output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
  },  module: {
rules: [
  { test: /\.css$/, use: 'css-loader' }
]
  },
  plugins: [new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

  • 這個文件中關鍵的東西就是上述提到的：四個核心概念：入口(entry)、輸出(output)、loader、插件(plugins)。弄懂這四個核心的東西，webpack也就懂得差不多了，起碼懂得怎么用。

  • 各大核心的作用：

  1. entry： 入口文件，也就是想要被打包的文件，這里可以是一個或者多個。

  2. output： 輸入文件，表示打包后的文件將會被輸出到哪里，可以一個或多個。

  3. module：模塊，里面的rules是一個數(shù)組，存放則項目中需要用到的loader，loader可以對資源文件進行一系列的處理。常見的loader：style-loader，css-loader，less-loader，babel-loader，url-loader等等。

  4. plugins：插件，為webpack添加所需的功能，如例子里面的是自動生成html模板插件。
    更多細節(jié)在webpack的官網上查看。

最后再說說：

  • 本次文章主要說說自己使用webpack時的一些想法和收獲，可能寫得不是很好，但這是個學習的過程，我很享受。

  • 再提提，以前我不怎么喜歡去看一些官方的文檔，因為全都是英文，自己英語也不是很好。但是后來硬著頭皮看，發(fā)現(xiàn)在文檔中學到的東西很多，也更有助于理解，有的文檔寫得很詳細，會懂得很多。這過程中不會的英語單詞就去查，順便就補補英語，其實挺好。通過自己看文檔，然后能用，能做，心里美滋滋。

http://www.cnblogs.com/Ry-yuan/p/7220494.html