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

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

話說前頭

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

webpack介紹

1.（引用了webpack官網(wǎng)的一句話）：

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

2.個(gè)人理解：

這里說了這么多就是它能把項(xiàng)目中資源文件看成一個(gè)個(gè)模塊，然后將他們打包成少量或一個(gè)文件，然后我們?nèi)ヒ眠@文件。

3.疑惑：

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

4.感受：

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

webpack能做的事：

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

• webpack可以對Js進(jìn)行轉(zhuǎn)譯，當(dāng)前瀏覽器很多不支持es6，但是我們想使用es6的語法，webpack可以將es6語法轉(zhuǎn)成es5語法

• webpack可以對less，sass，stylus等css的預(yù)處理語言進(jìn)行轉(zhuǎn)譯

• webpack可以熱更新

• webpack可以對圖片處理，壓縮，轉(zhuǎn)成base64格式。

• webpack可以對代碼進(jìn)行壓縮。

• webpack可以進(jìn)行語法檢查，可以生成自動(dòng)化html模板等等

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

webpack安裝：

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

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

3. 接著正式安裝webpack,命令行中運(yùn)行：

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

    

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

webpack的關(guān)鍵文件:webpack.config.js

• webpack.config.js是webpack的配置文件，對項(xiàng)目中的webpack進(jìn)行配置。

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

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

• 項(xiàng)目根目錄新建簡單的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'})
    ]
  };

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

• 各大核心的作用：

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

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

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

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

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