2019-04-01

webpack （版本 4.29.6 )入門(mén)

在看webpack官網(wǎng)之前，先打開(kāi)Git Bash，我們要設(shè)置一下npm，讓npm下載得更快一些
1.運(yùn)行npm config set loglevel http，讓你知道npm發(fā)的每一個(gè)請(qǐng)求
2.運(yùn)行npm config set progress false，關(guān)閉那個(gè)無(wú)聊的進(jìn)度條
3.運(yùn)行npm config set registry https://registry.npm.taobao.org/，從淘寶的服務(wù)器下載各種包。不過(guò)這會(huì)讓你在運(yùn)行npm adduser的時(shí)候出問(wèn)題，想要恢復(fù)成原樣，只需要運(yùn)行npm config delete registry即可。
4.運(yùn)行touch ~/.bashrc; echo 'export PHANTOMJS_CDNURL="http://npm.taobao.org/mirrors/phantomjs"' >> ~/.bashrc讓npm從淘寶下載phantomjs
5.運(yùn)行touch ~/.bashrc; echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc讓npm從淘寶下載SASS
6運(yùn)行source ~/.bashrc

接著就是正式的操作：

1.建立文件夾

mkdir webpack-demo && cd webpack-demo
npm init -y // 初始化，得到package.json文件
npm install --save-dev webpack //安裝

2.創(chuàng)建子文件夾app和index文件

mkdir app && cd app
touch index.js

3.編輯app / index.js

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

注意上面代碼中的.join，這個(gè)實(shí)際上是lodash暴露的全局變量。

4.在項(xiàng)目的根目錄中創(chuàng)建一個(gè)index.html文件。
touch index.html
目前的文件結(jié)構(gòu):(注意index.html不在app里）

.
├── app
│   └── index.js
├── index.html
└── package.json

5.編輯index.html

<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

為了使用lodash，HTML使用腳本引入了lodash v4.16.6。
我們可以用更高端的方法引入lodash。

# 請(qǐng)先確保命令行當(dāng)前所在目錄是 webpack-demo
npm install --save lodash
# 上面命令可以簡(jiǎn)寫(xiě)成 npm i -S lodash

好了，lodash的源代碼就被下載到./node_modules/lodash/目錄中。
然后在app / index.js的第一行添加
import _ from 'lodash';

6.修改app / index.html

<html>
   <head>
     <title>webpack 2 demo</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="app/index.js"></script>
+    <script src="dist/bundle.js"></script>
   </body>
 </html>

-表示刪除這一行，+表示新增一行
然后運(yùn)行
./node_modules/.bin/webpack app/index.js --output dist/bundle.js --mode development

將app / index.js變成dist / bundle.js
瀏覽器打開(kāi)index.html，如果你看到Hello webpack，說(shuō)明你運(yùn)行成功了.

7.整體文件結(jié)構(gòu)

.
├── app
│   └── index.js
├── dist
│   └── bundle.js
├── index.html
├── node_modules/
└── package.json

8.用git上傳到github

# 確保你在項(xiàng)目根目錄，也就是webpack-demo 目錄
git init
git config user.name 你的名字
git config user.email 你的郵箱
echo '/node_modules/' > .gitignore
git add .
git commit -m '完成 webpack 的第一個(gè)例子'

然后去GitHub上新建一個(gè)repo，（你在新建repo的時(shí)候，除了repo name，其他的什么都不要寫(xiě)!!!）


image.png

然后一行一行地復(fù)制圖中所指的兩行代碼，運(yùn)行完后，刷新GitHub.

9.引入jQuery
如果我們要在頁(yè)面里面引入jQuery，那么就是

# 確定你在 webpack-demo 目錄
npm i -S jquery

這樣一來(lái)jquery就會(huì)被下載到node_modules里面。

然后我們?cè)赼pp / index.js里面引入

jquery
import _ from 'lodash'
+import j from 'jquery'

 function component () {
-  var element = document.createElement('div');
+  var element = j('<div></div>');

   /* lodash is required for the next line to work */
-  element.innerHTML = _.join(['Hello','webpack'], ' ');
+  element.html(_.join(['Hello','webpack'], ' '))

-  return element;
+  return element.get(0);
 }

 document.body.appendChild(component());

然后再次運(yùn)行./node_modules/.bin/webpack app/index.js --output dist/bundle.js --mode development
打開(kāi)index.html。如果你看到Hello webpack，那就說(shuō)明jquery也引入成功了.
運(yùn)行成功請(qǐng)?zhí)峤唬╟ommit并推）到GitHub！

10.改進(jìn)運(yùn)行辦法
每次運(yùn)行都需要輸入./node_modules/.bin/webpack app/index.js --output dist/bundle.js --mode development啟動(dòng)，太長(zhǎng)了記不住.
在項(xiàng)目根目錄新建并編輯webpack.config.js：

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后 ./node_modules/.bin/webpack app/index.js --output dist/bundle.js --mode development 就可以換成:./node_modules/.bin/webpack --config webpack.config.js --mode development
不過(guò)這句話依然很長(zhǎng)，每次輸入很麻煩，另一個(gè)辦法：修改package.json：

 "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "keywords": [],

然后運(yùn)行npm run build

# npm run build

> webpack-demo@1.0.0 build /tmp/webpack-demo
> webpack

Hash: e80fc48906e74c40817a
Version: webpack 2.3.2
Time: 525ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  813 kB       0  [emitted]  [big]  main
   [0] ./~/jquery/dist/jquery.js 268 kB {0} [built]
   [1] ./~/lodash/lodash.js 540 kB {0} [built]
   [2] ./app/index.js 277 bytes {0} [built]
   [3] (webpack)/buildin/global.js 509 bytes {0} [built]
   [4] (webpack)/buildin/module.js 517 bytes {0} [built]

運(yùn)行 npm run build 就等于運(yùn)行 node_modules 里的 webpack 可執(zhí)行文件，這個(gè)可執(zhí)行文件會(huì)自己去 webpack.config.js 里找 app/index.js、dist 和 bundle.js 三個(gè)關(guān)鍵詞。

11.因?yàn)閎undle.js體積很大，所以對(duì)它進(jìn)行壓縮
先install uglifyjs-webpack-plugin:
npm install uglifyjs-webpack-plugin --save-dev
然后把uglifyjs-webpack-plugin添加到webpack config.舉個(gè)例子：
webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

當(dāng)然還可以添加其他Options

12.每次寫(xiě)完代碼都要 npm run build 是不是很煩？

我們需要 watch：webpack 監(jiān)聽(tīng)文件變動(dòng)，一旦我們保存了文件，它就重新 build 代碼。官方文檔Development這一章節(jié)就是專門(mén)介紹如何快速開(kāi)發(fā)的.可以根據(jù)自己需要看。到達(dá) webpack Watch Mode 這一章節(jié)。這就是我們想要的。接下來(lái)我們來(lái)添加一個(gè) npm script

 "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
+ "dev": "webpack --progress --watch"
   },
   "keywords": [],

運(yùn)行 npm run dev
你會(huì)發(fā)現(xiàn)，光標(biāo)停在那里，無(wú)法退出程序。

如果你想要退出，請(qǐng)按CTRL加C。但是現(xiàn)在先別按，我們需要驗(yàn)證 watch 功能。

打開(kāi) index.html， 編輯 app/index.js，把 Hello 改成 Hi，保存。

你會(huì)發(fā)現(xiàn) webpack 自動(dòng) build 了。

這時(shí)刷新 index.html，你就看到了 Hi.

13.要是能幫忙刷新瀏覽器就更好了。因此我們使用webpack-dev-server
npm install --save-dev webpack-dev-server
接著修改 index.html：

<title>webpack 2 demo</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
    <script src="/bundle.js"></script>
  </body>
</html>

然后修改package.json：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack ",
  -  "dev": "webpack --progress --watch"
   + "dev": "webpack-dev-server --open"
  },

改完之后，我們就不能再直接打開(kāi) index.html 了，因?yàn)樗玫氖?/bundle.js，用 file:// 協(xié)議打開(kāi) index.html 的話，會(huì)請(qǐng)求 file:///bundle.js，顯然這個(gè)文件不存在。
我們只能運(yùn)行 npm run dev，然后瀏覽器就會(huì)自動(dòng)打開(kāi) http://localhost:8080/ ，你會(huì)看到 index.html 頁(yè)面。

接下來(lái)如果我們改一下 app/index.js，你就會(huì)發(fā)現(xiàn)

  1. bundle.js 自動(dòng)打包
  2. http://localhost:8080/ 自動(dòng)刷新

但是你要注意，期間 dist/bundle.js 不會(huì)自動(dòng)變化，你在部署代碼之前，依然要運(yùn)行 npm run build 才行。

參考資料：
1.https://jirengu-inc.github.io/project-react-1/index.html
2.https://stackoverflow.com/questions/49006389/webpack-error-in-multi-src-index-js-dist-bundle-js
3.https://www.npmjs.com/package/uglifyjs-webpack-plugin
4.https://webpack.js.org/guides/development/

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • GitChat技術(shù)雜談 前言 本文較長(zhǎng)，為了節(jié)省你的閱讀時(shí)間，在文前列寫(xiě)作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,873評(píng)論 7贊 110
  • Webpack官網(wǎng)Webpack在github上的首頁(yè)在releases下面可以看到所有發(fā)布的版本。 一、npm ...
    婷樓沐熙閱讀 572評(píng)論 0贊 0
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,662評(píng)論 2贊 71
  • 作者：小 boy （滬江前端開(kāi)發(fā)工程師）本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處。原文地址：https://www.smas...
    iKcamp閱讀 2,825評(píng)論 0贊 18
  • 如果A=1 Z=26，輸入1000，則是ALL 遞歸算法 function math($num){$res = a...
    夢(mèng)醒皆涳閱讀 496評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容