學(xué)習(xí)webpack，看完這篇文章就夠了

2021-03-16    分類： 網(wǎng)站建設(shè)

寫在前面的話

閱讀本文之前，先看下面這個webpack的配置文件，如果每一項你都懂，那本文能帶給你的收獲也許就比較有限，你可以快速瀏覽或直接跳過；如果你和十天前的我一樣，對很多選項存在著疑惑，那花一段時間慢慢閱讀本文，你的疑惑一定一個一個都會消失；如果你以前沒怎么接觸過Webpack，而你又你對webpack感興趣，那么動手跟著本文中那個貫穿始終的例子寫一次，寫完以后你會發(fā)現(xiàn)你已明明白白的走進(jìn)了Webpack的大門。

// 一個常見的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
      path: __dirname + "/build",
      filename: "bundle-[hash].js"
    },
    devtool: 'none',
    devServer: {
      contentBase: "./public", //本地服務(wù)器所加載的頁面所在的目錄
      historyApiFallback: true, //不跳轉(zhuǎn)
      inline: true,
      hot: true
    },
    module: {
      rules: [{
          test: /(\.jsx|\.js)$/,
          use: {
            loader: "babel-loader"
          },
          exclude: /node_modules/
        }, {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [{
              loader: "css-loader",
              options: {
                modules: true,
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            }, {
              loader: "postcss-loader"
            }],
          })
        }
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版權(quán)所有，翻版必究'),
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html" //new 一個這個插件的實例，并傳入相關(guān)的參數(shù)
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]
};

什么是WebPack，為什么要使用它？

為什要使用WebPack

現(xiàn)今的很多網(wǎng)頁其實可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包。為了簡化開發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出了很多好的實踐方法

  • 模塊化，讓我們可以把復(fù)雜的程序細(xì)化為小的文件;
  • 類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能轉(zhuǎn)換為JavaScript文件使瀏覽器可以識別；
  • Scss，less等CSS預(yù)處理器
  • ...

這些改進(jìn)確實大大的提高了我們的開發(fā)效率，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現(xiàn)提供了需求。

什么是Webpack

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。

WebPack和Grunt以及Gulp相比有什么特性

其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優(yōu)點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進(jìn)行類似編譯，組合，壓縮等任務(wù)的具體步驟，工具之后可以自動替你完成這些任務(wù)。

webpack

Webpack的工作方式是：把你的項目當(dāng)做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。

如果實在要把二者進(jìn)行比較，Webpack的處理速度更快更直接，能打包更多不同類型的文件。

開始使用Webpack

初步了解了Webpack工作方式后，我們一步步的開始學(xué)習(xí)使用Webpack。

安裝

Webpack可以使用npm安裝，新建一個空的練習(xí)文件夾（此處命名為webpack sample project），在終端中轉(zhuǎn)到該文件夾后執(zhí)行下述指令就可以完成安裝。

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

正式使用Webpack前的準(zhǔn)備

  1. 在上述練習(xí)文件夾中創(chuàng)建一個package.json文件，這是一個標(biāo)準(zhǔn)的npm說明文件，里面蘊含了豐富的信息，包括當(dāng)前項目的依賴模塊，自定義的腳本任務(wù)等等。在終端中使用npm init命令可以自動創(chuàng)建這個package.json文件
npm init

輸入這個命令后，終端會問你一系列諸如項目名稱，項目描述，作者等信息，不過不用擔(dān)心，如果你不準(zhǔn)備在npm中發(fā)布你的模塊，這些問題的答案都不重要，回車默認(rèn)即可。

  1. package.json文件已經(jīng)就緒，我們在本項目中安裝Webpack作為依賴包
// 安裝Webpack
npm install --save-dev webpack
  1. 回到之前的空文件夾，并在里面創(chuàng)建兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數(shù)據(jù)和我們將寫的JavaScript模塊，public文件夾用來存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來我們再創(chuàng)建三個文件:
  • index.html --放在public文件夾中;
  • Greeter.js-- 放在app文件夾中;
  • main.js-- 放在app文件夾中;

此時項目結(jié)構(gòu)如下圖所示

webpack

我們在index.html文件中寫入最基礎(chǔ)的html代碼，它在這里目的在于引入打包后的js文件（這里我們先把之后打包后的js文件命名為bundle.js，之后我們還會詳細(xì)講述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Webpack Sample Project</title>
 </head>
 <body>
  <div id='root'>
  </div>
  <script src="bundle.js"></script>
 </body>
</html>

我們在Greeter.js中定義一個返回包含問候信息的html元素的函數(shù),并依據(jù)CommonJS規(guī)范導(dǎo)出這個函數(shù)為一個模塊：

// Greeter.js
module.exports = function() {
 var greet = document.createElement('div');
 greet.textContent = "Hi there and greetings!";
 return greet;
};

main.js文件中我們寫入下述代碼，用以把Greeter模塊返回的節(jié)點插入頁面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

正式使用Webpack

webpack可以在終端中使用，在基本的使用方法如下：

# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，
# {destination for bundled file}處填寫打包文件的存放路徑
# 填寫路徑的時候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件后，webpack將自動識別項目所依賴的其它文件，不過需要注意的是如果你的webpack不是全局安裝的，那么當(dāng)你在終端中使用此命令時，需要額外指定其在node_modules中的地址，繼續(xù)上面的例子，在終端中輸入如下命令

# webpack非全局安裝的情況
node_modules/.bin/webpack app/main.js public/bundle.js

結(jié)果如下

webpack

可以看出webpack同時編譯了main.js 和Greeter,js,現(xiàn)在打開index.html,可以看到如下結(jié)果

webpack

有沒有很激動，已經(jīng)成功的使用Webpack打包了一個文件了。不過在終端中進(jìn)行復(fù)雜的操作，其實是不太方便且容易出錯的，接下來看看Webpack的另一種更常見的使用方法。

通過配置文件來使用Webpack

Webpack擁有很多其它的比較高級的功能（比如說本文后面會介紹的loaders和plugins），這些功能其實都可以通過命令行模式實現(xiàn)，但是正如前面提到的，這樣不太方便且容易出錯的，更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，我們可以把所有的與打包相關(guān)的信息放在里面。

繼續(xù)上面的例子來說明如何寫這個配置文件，在當(dāng)前練習(xí)文件夾的根目錄下新建一個名為webpack.config.js的文件，我們在其中寫入如下所示的簡單配置代碼，目前的配置主要涉及到的內(nèi)容是入口文件路徑和打包后文件的存放路徑。

module.exports = {
 entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
 output: {
  path: __dirname + "/public",//打包后的文件存放的地方
  filename: "bundle.js"//打包后輸出文件的文件名
 }
}

注：“__dirname”是node.js中的一個全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄。

有了這個配置之后，再打包文件，只需在終端里運行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會自動引用webpack.config.js文件中的配置選項，示例如下：

webpack

又學(xué)會了一種使用Webpack的方法，這種方法不用管那煩人的命令行參數(shù)，有沒有感覺很爽。如果我們可以連webpack(非全局安裝需使用node_modules/.bin/webpack)這條命令都可以不用，那種感覺會不會更爽~，繼續(xù)看下文。

更快捷的執(zhí)行打包任務(wù)

在命令行中輸入命令需要代碼類似于node_modules/.bin/webpack這樣的路徑其實是比較煩人的，不過值得慶幸的是npm可以引導(dǎo)任務(wù)執(zhí)行，對npm進(jìn)行配置后可以在命令行中使用簡單的npm start命令來替代上面略微繁瑣的命令。在package.json中對scripts對象進(jìn)行相關(guān)設(shè)置即可，設(shè)置方法如下。

{
 "name": "webpack-sample-project",
 "version": "1.0.0",
 "description": "Sample webpack project",
 "scripts": {
  "start": "webpack" // 修改的是這里，JSON文件不支持注釋，引用時請清除
 },
 "author": "zhang",
 "license": "ISC",
 "devDependencies": {
  "webpack": "3.10.0"
 }
}

注：package.json中的script會安裝一定順序?qū)ふ颐顚?yīng)位置，本地的node_modules/.bin路徑就在這個尋找清單中，所以無論是全局還是局部安裝的Webpack，你都不需要寫前面那指明詳細(xì)的路徑了。

npm的start命令是一個特殊的腳本名稱，其特殊性表現(xiàn)在，在命令行中使用npm start就可以執(zhí)行其對于的命令，如果對應(yīng)的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}如npm run build，我們在命令行中輸入npm start試試，輸出結(jié)果如下：

webpack

現(xiàn)在只需要使用npm start就可以打包文件了，有沒有覺得webpack也不過如此嘛，不過不要太小瞧webpack，要充分發(fā)揮其強(qiáng)大的功能我們需要修改配置文件的其它選項，一項項來看。

Webpack的強(qiáng)大功能

生成Source Maps（使調(diào)試更容易）

開發(fā)總是離不開調(diào)試，方便的調(diào)試能極大的提高開發(fā)效率，不過有時候通過打包后的文件，你是不容易找到出錯了的地方，對應(yīng)的你寫的代碼的位置的，Source Maps就是來幫我們解決這個問題的。

通過簡單的配置，webpack就可以在打包時為我們生成的source maps，這為我們提供了一種對應(yīng)編譯文件和源文件的方法，使得編譯后的代碼可讀性更高，也更容易調(diào)試。

在

webpack的配置文件中配置source maps，需要配置學(xué)習(xí)webpack，看完這篇文章就夠了
網(wǎng)頁網(wǎng)址：http://muchs.cn/news49/105299.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、移動網(wǎng)站建設(shè)、微信公眾號、網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)