webpack快速入門

時間  2021-02-21
標籤 javascript css html vue java node webpack es6 web npm 欄目 JavaScript 简体版
原文   原文鏈接

webpack是一個靜態模塊打包工具，基於node.js開發。在開啓webpack coding以前，咱們先了解一些核心概念。javascript

一. 核心概念

1.Entry
主入口，用來告訴webpack從哪一個模塊開始，它會找出哪些模塊或庫是入口模塊（直接或間接）的依賴css

2.Output
告訴 webpack 在哪裏輸出它所建立的 bundle，以及如何命名這些文件html

3.Loader
在webpack中，萬物皆模塊。它自己只能理解 json和js文件。loader 讓 webpack 可以去處理其餘類型的文件，並將它們轉換爲有效模塊，以供應用程序使用，以及被添加到依賴圖中。
好比： xx.vue, xx.ts, xx.scss 模塊，須要使用對應的loader，轉化爲 webpack 認識的格式。
loader具備如下特性：vue

  • loader能夠是同步的，也能夠是異步的。
  • loader能夠在nodejs中執行
  • loader支持鏈式調用，一組鏈式loader將按照相反順序執行。鏈中的第一個 loader 將其結果（也就是應用過轉換後的資源）傳遞給下一個 loader，依此類推。最後，鏈中的最後一個 loader，返回 webpack 所指望的 JavaScript。

4.Plugin
loader 用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變量等。java

5.Mode
構建模式，告訴webpack是開發環境仍是生產環境。 經過選擇 development, production 或 none 之中的一個，來設置 mode 參數。node

6.瀏覽器兼容
webpack 支持全部符合 ES5 標準 的瀏覽器（不支持 IE8 及如下版本）webpack

7.運行環境
運行環境是node.js。有許多剛入門的小夥伴，誤認爲是瀏覽器，在此提醒下~es6

準備工做ok，下面咱們進入奇妙的webpack之旅吧~web

二. hello world

下面，咱們先初始化一個項目，執行：npm

npm init test
touch webpack.config.js index.html index.js index.css
yarn add -D webpack@4.43.0 webpack-cli@3.3.11 html-webpack-plugin@4.3.0

編輯index.html

<html>
    <head>
        <meta charset="utf-8"/>
    </head>

    <body>
        <div id='root' class="root"></div>
    </body>
</html>

編輯index.js

console.log("hello world")

編輯webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 輸出文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 開發模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html"
    })
  ],
}

編輯package.json

"scripts": {
    "dev": "webpack --progress"
 },

執行 npm run dev，打開瀏覽器 http://localhost:8080，image.png
咱們的第一個程序，hello world 成功啦~

三. Loader

webpack一切皆模塊，但它只能處理js和json文件。

1. 若是咱們須要在js文件中使用es6語法，該如何操做呢？

這個時候，咱們須要babel

安裝
yarn add -D @babel/core@7.9.6 babel-loader@8.1.0
在webpack中添加loader配置
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 輸出文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 開發模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html"
    })
  ],
  // 添加loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader"
        },
        exclude: /node_modules/
      }
    ]
  }
}
測試
touch test.js

在test.js文件中，添加以下代碼：

export function Hi() {
  return "hi es6";
}

在index.js中引用

import { Hi } from "./test";

let res = Hi();

console.log(res); // hi es6

到這裏，咱們能夠愉快的使用es6 coding啦~

2. 若是咱們須要添加css文件，該如何操做呢？

這個時候，咱們須要css-loader, style-loader

安裝
yarn add -D css-loader style-loader
修改webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 輸出文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 開發模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html"
    })
  ],
  // 添加loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader"
        },
        exclude: /node_modules/
      },
      // 添加css-loader, style-loader
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
    ]
  }
}

注意：webpack執行style-loader, css-loader時， 從右往左執行，順序不可顛倒

測試

修改index.js

import { Hi } from "./test";
// 引入css文件
import "./index.css";

let res = Hi();

console.log(res);

index.css

.root {
  width: 100%;
  height: 100%;
  background: blue;
}

這個時候，咱們會看到頁面變成了藍色，樣式問題搞定，能夠愉快的編寫css啦~

3. 若是咱們須要添加.vue文件，該如何操做呢？

這個時候，咱們須要尤大的vue-loader

安裝
yarn add -D vue-loader@15.9.5 vue-template-compiler@2.6.12
yarn add vue@2.6.12
修改webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 輸出文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 開發模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html"
    }),
    // 添加vue loader 插件
    new VueLoaderPlugin(),
  ],
  // 添加loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader"
        },
        exclude: /node_modules/
      },
      // 添加css-loader, style-loader
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      // 添加.vue loader
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
    ]
  }
}
測試

修改index.js

// 引入css文件
import "./index.css";
import Vue from "vue";
// 引入vue文件
import HelloVue from "./hello.vue";

new Vue({
  render: h => h(HelloVue)
}).$mount('#root');

當前目錄下：添加hello.vue文件

<template>
  <div>你好 vue</div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }  
}
</script>

<style scoped>

</style>

image.png

vue-loader配置成功，咱們能夠愉快的編寫vue啦~

其實其餘文件也相似，咱們只須要使用對應的loader去解析對應的文件，就能夠了。
loader的本質，將webpack不認識的文件，轉化爲webpack可識別的格式

四. Plugin

plugin 用於擴展 Webpack 功能，各類各樣的 Plugin 幾乎讓 Webpack 能夠作任何構建相關的事件。
plugin 的配置很簡單，plugins 配置項接受一個數組，數組裏每一項都是一個要使用的 plugin 的實例。

舉個🌰：
咱們在構建時，須要瞭解構建的進度，那麼咱們這個時候須要插件來解決。

安裝
yarn add -D progress-bar-webpack-plugin@1.11.0
修改webpack.config.js配置
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
// 添加進度條插件
const ProgressBarPlugin = require("progress-bar-webpack-plugin");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 輸出文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 開發模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html"
    }),
    // 添加vue loader 插件
    new VueLoaderPlugin(),

    // 使用進度條插件
    new ProgressBarPlugin()
  ],
  // 添加loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader"
        },
        exclude: /node_modules/
      },
      // 添加css-loader, style-loader
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      // 添加.vue loader
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
    ]
  }
}
測試

image.png

構建進度條插件添加成功~

使用 Plugin 的難點在於掌握 Plugin 自己提供的配置項，而不是如何在 Webpack 中接入 Plugin。

幾乎全部 Webpack 沒法直接實現的功能都能在社區找到開源的 Plugin 去解決。

到這裏，咱們已經入門了webpack的基本操做。碼字不易，還請多多關注~😽

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程