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

寫(xiě)在前面的話

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

// 一個(gè)常見(jiàn)的`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ù)器所加載的頁(yè)面所在的目錄
      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 一個(gè)這個(gè)插件的實(shí)例，并傳入相關(guān)的參數(shù)
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]
};

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

為什要使用WebPack

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

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

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

什么是Webpack

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

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

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

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

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

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

開(kāi)始使用Webpack

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

安裝

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

//全局安裝
npm install -g webpack
//安裝到你的項(xiàng)目目錄
npm install --save-dev webpack

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

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

npm init

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

1. package.json文件已經(jīng)就緒，我們?cè)诒卷?xiàng)目中安裝Webpack作為依賴包

// 安裝Webpack
npm install --save-dev webpack

1. 回到之前的空文件夾，并在里面創(chuàng)建兩個(gè)文件夾,app文件夾和public文件夾，app文件夾用來(lái)存放原始數(shù)據(jù)和我們將寫(xiě)的JavaScript模塊，public文件夾用來(lái)存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個(gè)index.html文件）。接下來(lái)我們?cè)賱?chuàng)建三個(gè)文件:

• index.html --放在public文件夾中;
• Greeter.js-- 放在app文件夾中;
• main.js-- 放在app文件夾中;

此時(shí)項(xiàng)目結(jié)構(gòu)如下圖所示

我們?cè)?strong style="box-sizing: border-box;">index.html文件中寫(xiě)入最基礎(chǔ)的html代碼，它在這里目的在于引入打包后的js文件（這里我們先把之后打包后的js文件命名為bundle.js，之后我們還會(huì)詳細(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>

我們?cè)?code style="box-sizing: border-box; font-family: "Source Code Pro", Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 0.93em; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">Greeter.js中定義一個(gè)返回包含問(wèn)候信息的html元素的函數(shù),并依據(jù)CommonJS規(guī)范導(dǎo)出這個(gè)函數(shù)為一個(gè)模塊：

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

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

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

正式使用Webpack

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

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

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

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

結(jié)果如下

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

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

通過(guò)配置文件來(lái)使用Webpack

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

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

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

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

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

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

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

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

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

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

npm的start命令是一個(gè)特殊的腳本名稱，其特殊性表現(xiàn)在，在命令行中使用npm start就可以執(zhí)行其對(duì)于的命令，如果對(duì)應(yīng)的此腳本名稱不是start，想要在命令行中運(yùn)行時(shí)，需要這樣用npm run {script name}如npm run build，我們?cè)诿钚兄休斎?code style="box-sizing: border-box; font-family: "Source Code Pro", Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 0.93em; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 4px;">npm start試試，輸出結(jié)果如下：

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

Webpack的強(qiáng)大功能

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

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

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

在

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

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

廣告

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