webpack-基本使用

時間 2019-12-08

標籤 webpack 基本使用简体版

原文原文鏈接

webpack 是一個現JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會分析你的項目結構，遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊按照指定的規則打包成一個或多個 bundle，過程當中能夠經過配置把一些瀏覽器不能直接運行的拓展語言（scss，typescript等）轉換爲合適的格式。javascript

webpack處理模塊化js

webpack 用於編譯 JavaScript 模塊。一旦完成安裝，你就能夠經過 webpack 的 CLI 或 API 與其配合交互。css

準備工做

新建demo文件夾，npm init初始化項目，局部安裝webpack。html

`項目的基本結構`

一般會在項目的根目錄創建兩個文件夾，分別爲src文件夾和dist(或build)文件夾java

src文件夾：用來存放咱們編寫的javascript代碼，能夠簡單的理解爲用JavaScript編寫的模塊。
dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。

`使用webpack的基本文件`

<!-- dist/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>

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

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

使用webpack的方式

1.終端中使用node

# {extry file}處填寫入口文件的路徑
# {destination for bundled file}處填寫打包文件的存放路徑
webpack {entry file} {destination for bundled file}

若是webpack不是全局安裝的，那麼當你在終端中使用此命令時，須要額外指定其在node_modules中的地址webpack

# webpack非全局安裝的狀況
node_modules/.bin/webpack src/main.js dist/bundle.js

命令執行成功後，會在dist目錄下出現bundle.js文件，index.html就能夠在瀏覽器中預覽結果了。web

2.經過配置文件來使用Webpacktypescript

根目錄下建立webpack.config.js, 配置entry、output，終端中使用時能夠不用每次都手動添加。npm

const path = require('path');

module.exports = {
  entry:  __dirname + "/src/main.js", //已屢次說起的惟一入口文件
  output: {
    path: __dirname + "/dist", //打包後的文件存放的地方
    filename: "bundle.js" //打包後輸出文件的文件名
  }
}

webpack 或

webpack --config webpack.config.js

注：json

「__dirname」是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

文件中path也能夠這樣寫path: path.resolve(__dirname,'dist'), 注意須要引入‘path’, path.resolve(__dirname,'dist')獲取了項目的絕對路徑

非全局需使用node_modules/.bin/webpack

若是 webpack.config.js 存在，則 webpack 命令將默認選擇使用它，終端命令能夠不明確指出，若是命名爲其餘名字，須要--config xxx指明但願使用的配置文件。

3.npm 腳本

一般webpack推薦局部安裝，所以在命令行中輸入命令相似於node_modules/.bin/webpack這樣的路徑比較麻煩，能夠在package.json中對scripts對象進行相關設置便可，設置方法以下

{
    ...
    "scripts": {
        "start": "webpack" // 修改的是這裏，JSON文件不支持註釋，引用時請清除
    },
    ...
}

爲何能夠直接寫webpack，而不須要寫路徑，詳見 webpack安裝踩坑中關於npm 腳本原理的內容。

運行

npm run start 或

npm start

//除了幾個默認的命令，如start等，run不能夠省略。

webpack的基本使用就完成了……

其餘方式處理相互依賴的js

1.使用古老的js引入方式去管理 JavaScript 項目

<!-- 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="greet.js"></script>
    <script src="main.js"></script>
  </body>
</html>

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

// main.js
document.querySelector("#root").appendChild(greeter());

會有一些問題：

沒法當即體現，腳本的執行依賴於外部擴展庫(external library)。
若是依賴不存在，或者引入順序錯誤，應用程序將沒法正常運行。
若是依賴被引入可是並無使用，瀏覽器將被迫下載無用代碼。

2.模塊化方式

CMD規範的seaJS
AMD規範的requireJS
browserify
ES2015 中的 import 和 export 語句已經被標準化（大多數瀏覽器還沒法支持它們）

相關標籤/搜索

每日一句

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