Webpack 入門


Webpack 入門

Tip:

本文所有示例基於 webpack2。

文中的示例代碼說明可以參考:Webpack 示例代碼說明

安裝

本地安裝

$ npm install --save-dev webpack
$ npm install --save-dev webpack@<version>

如果你在項目中使用了 npmnpm 首先會在本地模塊中尋找 webpack。這是一個實用的小技巧。

"scripts": {
    "start": "webpack --config mywebpack.config.js"
}

上面是 npm 的標准配置,也是我們推薦的實踐。

當你在本地安裝 webpack 后,你能夠從 node_modules/.bin/webpack 訪問它的 bin 版本。

全局安裝

$ npm install --global webpack

webpack 命令現在可以全局執行了。

創建一個 bundle 文件

創建一個 app/index.js 文件。

document.write('<h1>Hello World</h1>');

創建一個 index.html 文件。

<html>
<body>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>

執行命令

$ webpack ./app/index.js ./dist/bundle.js

這條命令的第一個參數為輸入文件,第二個參數為輸出文件。

會在目錄下生成一個 dist/bundle.js 文件,它已打包所需的所有代碼的輸出文件。

在瀏覽器中打開 index.html 文件。

完整示例: (DEMO00)

webpack.config.js

webpack.config.jswebpack 默認的配置文件,當執行 webpack 命令時,webpack 會在當前目錄下自動搜索 webpack.config.js 文件。

單入口(Entry)

基於 (DEMO00) 的代碼,新建一個 webpack.config.js 文件,內容如下:

const path = require('path');

module.exports = {

  // 這里應用程序開始執行
  // webpack 開始打包
  entry: "./app/index.js",

  // webpack 如何輸出結果的相關選項
  output: {
    // 所有輸出文件的目標路徑
    // 必須是絕對路徑(使用 Node.js 的 path 模塊)
    path: path.resolve(__dirname, "dist"),

    // 「入口分塊(entry chunk)」的文件名模板(出口分塊?)
    filename: "bundle.js",
  }
};

執行命令

$ webpack

在瀏覽器中打開 index.html 文件。

完整示例: (DEMO01)

多入口(Entry)

如果有多個入口文件怎么辦?很簡單,我們來看一個示例:

新建 app/about.js 文件

document.write('<h2>ABOUT</h2>');

新建 app/home.js 文件

document.write('<h1>HOME</h1>');

新建 index.html 文件

<html>
<body>
<script src="dist/home.js"></script>
<script src="dist/about.js"></script>
</body>
</html>

新建 webpack.config.js 文件

const path = require('path');

module.exports = {

  // 這里應用程序開始執行
  // webpack 開始打包
  // 本例中 entry 為多入口
  entry: {
    home: './app/home.js',
    about: './app/about.js'
  },

  // webpack 如何輸出結果的相關選項
  output: {
    // 所有輸出文件的目標路徑
    // 必須是絕對路徑(使用 Node.js 的 path 模塊)
    path: path.resolve(__dirname, "dist"),

    // 「入口分塊(entry chunk)」的文件名模板(出口分塊?)
    // filename: "bundle.js", // 用於多個入口點(entry point)(出口點?)
    filename: "[name].js", // 用於多個入口點(entry point)(出口點?)
    // filename: "[chunkhash].js", // 用於長效緩存
    // filename: "[name].[chunkhash].js", // 用於長效緩存
  }
};

執行命令

$ webpack

在瀏覽器中打開 index.html 文件。

完整示例: (DEMO02)

Webpack 系列教程

歡迎閱讀其它內容:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM