webpack快速入門（二）：使用入門

時間 2019-11-29

標籤 webpack 快速入門使用简体版

原文原文鏈接

繼續以前請確認你已經安裝了nodejshtml

安裝、初始化：node

而後找個目錄新建名爲webpack-demo的文件夾，而後在命令行下進入該目錄，執行如下命令：webpack

npm init -y
npm install --save-dev webpack

一個初始化命令，會在當前目錄下生成一個package.json的配置文件程序員

一個本地安裝webpack的命令web

目錄內的結構以下：（以/開頭的爲目錄）npm

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

接下來在src/index.js中寫一個測試方法：json

function component() {
  var element = document.createElement('div');
  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

不解釋了，會點js應該均可以看懂瀏覽器

index.html的內容以下：app

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

沒什麼特別的，引用了lodash庫和咱們本身寫的index.js文件（此時尚未用webpack來管理依賴，因此咱們測試

經過script標籤來本身導入須要的庫文件）。

到此爲止就寫完了，運行一下html文件，應該沒什麼意外，你應該能夠看到頁面上有個DIV，DIV的內容是：

Hello webpack

這種方式其實也是我較早時候寫js的方式，須要什麼庫，本身寫或者本身去下載，而後經過script標籤引用

這種方式有以下幾個缺點：

須要在html文件顯示引入依賴腳本
若是依賴丟失或者引入順序錯誤，會早晨程序運行錯誤
若是導入依賴庫，可是沒使用到。瀏覽器依然會加載這個庫，形成請求流量增大，延緩頁面加載速度

使用webpack改造：

基於上述三個缺點，使用webpack來改造以前的項目：

改造後的目錄結構以下：

webpack-demo
  |- package.json
+ |- /dist + |- index.html - |- index.html |- /src |- index.js

其中藍色標註的爲新加的目錄和文件，紅色標註的爲刪除掉的文件
也就是刪掉了以前webpack-demo目錄下的index.html，新建了dist目錄，並在該目錄下新建index.html
剛纔在頁面中引入了lodash庫（咱們先無論它幹嗎用的，主要目的是webpack），如今在命令行中，
首先定位webpack-demo目錄下，而後執行：

npm install --save lodash

此命令將lodash安裝在本地，接着修改src目錄下的index.js文件修改後的js以下：

import _ from 'lodash';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
 }
 document.body.appendChild(component());

和剛開始的比較，第一行多了一個import導入語句，把lodash導入爲 _變量，下邊就能直接使用了

至於lodash哪來的？爲何能導入，看上邊npm install那行在幹嗎？不就是在安裝lodash嗎，安裝了固然能導入。

最後修改dist文件夾下的index.html，內容爲：

<html>
   <head>
     <title>Getting Started</title>
   </head>
   <body>
      <script src="bundle.js"></script>
   </body>
  </html>

相比於以前的index.html，這裏少了lodash的script引用標籤，並且連咱們本身寫的index.js文件的引入都沒有了

可是多了一個bundle.js，這是什麼？哪裏來的。不要着急，會明白的，先往下走

在本文開頭你執行npm install --save-dev執行本地安裝的時候，若是你留意一下，會看到當前目錄下生成了

一個文件夾叫作：node_modules，打開能夠看到N多的文件夾和文件，咱們的項目依賴能夠在這裏找到

因此咱們安裝的webpack也在這裏，如今代碼寫好了，讓咱們使用webpack來執行打包：

./node_modules/.bin/webpack src/index.js dist/bundle.js

這句話的意思是調用當前目錄下的node_modules目錄下的bin目錄下的webpack命令，webpack後邊的就是命令參數了

大概意思就是打包src目錄下的index.js文件到dist目錄下，打包後的文件爲bundle.js，就是這個意思了。

因此如今想一想，index.html裏引入的bundle.js哪來的？就是這裏了，引入webpack打包後的文件。

若是你執行這個命令報錯好比command not found，請確認兩點，第一webpack安裝成功了沒有

第二，看看你當前所在目錄，路徑對不對

若是沒什麼問題，稍等片刻你應該在控制檯會看到相似這樣的輸出：

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 3.1.4
Time: 385ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

好了，若是你看到了這個，那麼恭喜你，你的首個webpack打包已經成功了。立刻來看看吧

打開dist下的index.html文件，你應該能看到和以前同樣的效果，頁面顯示：Hello webpack

使用配置文件：

剛纔打包咱們輸入了一長串的命令，容易錯，還很差記，有沒有什麼辦法能簡化一下？

有的，就是使用配置文件，再次改造一下，在webpack-demo目錄下新建webpack.config.js

內容以下：

const path = require('path');

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

保存文件，而後控制檯執行：

./node_modules/.bin/webpack --config webpack.config.js

會發現打包依然成功了，和以前的打包效果同樣，不過此次咱們沒有指定打包的文件和打包後的存放路徑這些

這些經過配置放在了webpack.config.js中。

entry指定了打包的入口文件，output指定了打包後的相關參數，filename是打包後的文件名，path是打包後的存放路徑

上邊的命令其實還能簡化，能夠直接輸入：

./node_modules/.bin/webpack

也能打包成功，由於webpack打包默認會尋找一個名webpack.config.js的文件，因此不須要顯示指定，之因此使用--config參數

是想說明若是咱們自定義配置文件不叫默認的名字：webpack.config.js，那麼能夠經過--config 自定義文件名的形式來打包。

再次簡化，使用npm腳本：

如今第一個webpack程序已經跑起來了，可是若是你是個合格的程序員，你會想，我X，這麼麻煩

每次打包還要命令行輸入命令？還要指定打包文件？還要指定打包後的文件和目錄.....，簡直不能忍

因此咱們來簡化一下，當個合格的程序員（懶）：

咱們在開頭時執行了npm init這個命令，當時說了會生成一個package.json，到如今還沒用上呢，如今就來用用

{
  "scripts": {
    "build": "webpack"
  }
}

在scripts下加上"build": "webpack"的字樣，就能夠了，意思就是新建了一個腳本命令，名字爲build，對應要執行的命令爲webpack

好了，就這麼簡單，保存一下，而後回到咱們的webpack-demo目錄下，執行npm run build看看效果吧，若是你跟着一路坐下來，

應該能看到上面打包成功的那些信息。

這裏其實就是用一個名字爲build的腳本命令代替了./node_modules./bin/webpack......這一長串的命令。

到此爲止，下一篇：資源管理

1. Webpack快速入門
2. Webpack 快速入門
3. webpack快速入門
4. webpack——快速入門【一】
5. Webpack系列—快速入門
6. Git使用快速入門
7. log4j使用快速入門
8. 使用maven快速入門
9. ES6快速入門使用
10. WinAVR使用快速入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。