中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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

寫(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

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)如下圖所示

webpack

我們?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

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

webpack

有沒(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ì)介紹的loadersplugins),這些功能其實(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),示例如下:

webpack

又學(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é)果如下:

webpack

現(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://m.rwnh.cn/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)

遂昌县| 湖南省| 瑞昌市| 东莞市| 德江县| 凤山市| 平阳县| 崇阳县| 泰州市| 临清市| 尚义县| 广南县| 鹤岗市| 漠河县| 大丰市| 南昌市| 永靖县| 临泉县| 定边县| 越西县| 溧阳市| 丰城市| 平利县| 竹北市| 博爱县| 静安区| 海淀区| 玉田县| 定陶县| 益阳市| 安国市| 远安县| 仪陇县| 吉林市| 四子王旗| 金门县| 雅江县| 仪陇县| 宜阳县| 黄平县| 志丹县|