前端模塊化工具webpack的心得是什么

這篇文章將為大家詳細講解有關前端模塊化工具webpack的心得是什么，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

話說前頭

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

webpack介紹

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

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

2.個人理解：

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

3.疑惑：

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

4.感受：

其實學習某一樣工具，我們只需要知道這東西能做什么，然后怎么用它，但它具體實現的細節，有時我們不必深究。我們只需知其然，不必知其所以然。盡管去用這個東西，它本來就是一個工具。就好比開一輛車，我們只需去學習怎么開，而不用太在意他為什么能開，開多了一樣成為老司機，不是嗎，沒毛病吧。工具它能給我們帶來便利，就足夠了。除非你是制造工具的。但是如果對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實現的，可以說是很強大了。

webpack安裝：

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

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

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

   //全局安裝npm install -g webpack//創建一個文件夾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是一個數組，存放則項目中需要用到的loader，loader可以對資源文件進行一系列的處理。常見的loader：style-loader，css-loader，less-loader，babel-loader，url-loader等等。

4. plugins：插件，為webpack添加所需的功能，如例子里面的是自動生成html模板插件。
   

關于前端模塊化工具webpack的心得是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。