webpack 4.x 初級學習記錄

時間  2019-11-13
標籤 webpack 4.x 初級 學習 記錄 简体版
原文   原文鏈接

首先聲明下，本人不擅長文字表達，文采不行，因此文章中文字較少，請看代碼，初級學習，不足之處請多多指教css

GitHub連接 看雲kancloudhtml

[TOC]前端

webpack 4.x 安裝

  1. 首先須要在全局中安裝
npm install webpack -g
npm install webpack-cli -g  // 與webpack 3.x 的區別
  1. 接下來打開新的文件夾，建立package.json
npm init

初始化 package.json 文件。node

  1. 局部安裝
npm install webpack --save
npm install webpack-cli --save

webpack 4.x 基本打包編譯

  1. webpack 3.x 編譯
webpack a.js b.js
# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，
# {destination for bundled file}處填寫打包文件的存放路徑
# 填寫路徑的時候不用添加{}
webpack {entry file} {destination for bundled file}

以上就是4版本以前的使用方式，可是這種方式在4版本中就不能使用了，4版本有本身的新的方式react

  1. webpack 4.x 默認打包編譯

爲何上面要寫默認打包編譯，是由於webpack能夠自定義打包編譯配置，咱們首先說下默認的打包編譯。jquery

entry: "/src/index.js"  // 默認入口文件
output: "/dist/main.js"  // 默認輸入文件

上面路徑及文件中，src 和 index.js 須要咱們手動去建立，在 index.js 中寫好js代碼便可，其他的 dist 和 main.js 都是由系統自動生成的，而且當你再一次編譯時，會自動的在 dist 中覆蓋同名文件。webpack

而webpack 4.x 的編譯命令也發生變化了，以下所示，分爲開發環境和生產環境的命令git

webpack --mode development
webpack --mode production

使用命令後，會自動生成文件。github

配置 package.json 文件web

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
}

可使用 npm ruin dev 和 npm run build 進行執行命令

webpack 配置

概念

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(static module bundler)。在 webpack 處理應用程序時，它會在內部建立一個依賴圖(dependency graph)，用於映射到項目須要的每一個模塊，而後將全部這些依賴生成到一個或多個bundle。

來自webpack 從 webpack 4.0.0 版本開始，能夠不用經過引入一個配置文件打包項目。然而，webpack 仍然仍是 高度可配置的，而且可以很好的知足需求。

webpack 的核心概念：

  1. 入口（entry）
  2. 輸出（output）
  3. loader
  4. 插件（plugins）

咱們須要在根目錄下建立一個 webpack.config.js 的文件，使用 Commonjs 規範來進行書寫。

入口（entry）

入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

能夠經過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。默認值爲 ./src 。

module.exports = {
  entry: "./src/index.js",
};

entry 屬性的單個入口語法，是下面的簡寫：

module.exports = {
  entry: {
    main: "./src/index.js",
  }
};

當你向 entry 傳入一個數組時會發生什麼？向 entry 屬性傳入「文件路徑(file path)數組」將建立「多個主入口(multi-main entry)」。在你想要多個依賴文件一塊兒注入，而且將它們的依賴導向(graph)到一個「chunk」時，傳入數組的方式就頗有用。

多個入口文件處理

module.exports = {
  entry: {
    main: "./src/index.js",
    app: './src/app.js'
  }
};

根據經驗：每一個 HTML 文檔只使用一個入口起點。 固然也可使用多個，可是推薦一個使用一個

瞭解更多

輸出（output）

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你能夠經過在配置中指定一個 output 字段，來配置這些處理過程：

const path = require('path');

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

固然上面的位置文件名都是能夠改變的，能夠自定義配置。

在上面的示例中，咱們經過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及咱們想要 bundle 生成(emit)到哪裏

瞭解更多

loader

' loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）能夠直接引用的模塊。

注意，loader 可以 import 導入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其餘打包程序或任務執行器的可能並不支持。咱們認爲這種語言擴展是有很必要的，由於這可使開發人員建立出更準確的依賴關係圖。

在更高層面，在 webpack 的配置中 loader 有兩個目標：

  1. test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
  2. use 屬性，表示進行轉換時，應該使用哪一個 loader。
const path = require('path');

const config = {
  entry: "./src/index.js"
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

以上配置中，對一個單獨的 module 對象定義了 rules 屬性，裏面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 以下信息：

「嘿，webpack 編譯器，當你碰到「在 require()/import 語句中被解析爲 '.txt' 的路徑」時，在你對它打包以前，先使用 raw-loader 轉換一下。」

瞭解更多

插件（plugins）

loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。多數插件能夠經過選項(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做符來建立它的一個實例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

webpack 提供許多開箱可用的插件！查閱插件列表獲取更多信息。

在 webpack 配置中使用插件是簡單直接的，然而也有不少值得咱們進一步探討的用例。

瞭解更多

webpack-dev-server

本地服務器

安裝

npm install webpack-dev-server -S

基本概念

能夠構建一個本地服務器進行啓動測試

配置webpack.config.js

webpack.config.js

devServer: {
    contentBase: path.join(__dirname, "/dist"),  //啓動路徑
    port: 9001,  // 端口號
    hot: true,  // 熱更新
    inline:true  // 內聯模式
}

固然在使用上面 hot 熱更新時須要開啓一個插件 HotModuleReplacementPlugin 此插件屬於內置插件，能夠直接使用 new webpack.HotModuleReplacementPlugin() 來進行啓用

以上使 webpack-dev-server 的基本參數用法，具體的能夠查看此處

配置package.json

"scripts": {
    "start": "webpack-dev-server --open"
}

使用 npm start 開啓啓動命令

webpack loader處理

loader ： 加載程序

loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或"加載"模塊時預處理文件。所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！

安裝

cnpm install css-loader style-loader -S

配置

當新建文件 *.css 文件時進行css文件處理

webpack.config.js

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }
    ]
}

在其中須要注意的就是 style-loader 在 css-loader 以前。

當 css 有 background-image: url('./1.jpg') 有圖片插入進來時，須要使用 file-loader 來進行處理

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        },
        {
            test:/\.(jpg|png|jpeg)$/,
            use:['file-loader']
        }
    ]
}

設置圖片保存地方及是否使用base64進行處理

{
    test:/\.(jpg|png|jpeg)$/,
    use:'file-loader?limit=1024&name=./images/[hash:8].[name].[ext]'
}

HTML的img標記處理

安裝

cnpm install html-withimg-loader -S

配置

{
    test:/\.html$/,
    use:["html-withimg-loader"]
}

CSS 打包分離

安裝

cnpm install extract-text-webpack-plugin@next -S

配置

const ExtractTextPlugin=require('extract-text-webpack-plugin');

//插件
new ExtractTextPlugin('./css/[name].css')

// rules
{
    test:/\.css$/,
    use:ExtractTextPlugin.extract({
        fallback:"style-loader",
        use:[{
            loader:"css-loader",
            options:{
                // 壓縮
                minimize:true
            }
        }],
        // 添加公共路徑
        publicPath:"../"
    })
}

webpack 插件

插件是 webpack 的支柱功能。webpack 自身也是構建於，你在 webpack 配置中用到的相同的插件系統之上！

插件目的在於解決 loader 沒法實現的其餘事。

剖析

webpack 插件是一個具備 apply 屬性的 JavaScript 對象。apply 屬性會被 webpack compiler 調用，而且 compiler 對象可在整個編譯生命週期訪問。

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 構建過程開始！");
        });
    }
}

compiler hook 的 tap 方法的第一個參數，應該是駝峯式命名的插件名稱。建議爲此使用一個常量，以便它能夠在全部 hook 中複用。

用法

因爲插件能夠攜帶參數/選項，你必須在 webpack 配置中，向 plugins 屬性傳入 new 實例。

根據你的 webpack 用法，這裏有多種方式使用插件。

配置

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //經過 npm 安裝
const webpack = require('webpack'); //訪問內置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

固然上面的 HtmlWebpackPlugin 插件只使用了基本的功能，更多的參數能夠去github上查看。

webpack babel

安裝

核心 babel-core

功能 babel-loader babel-preset-env babel-preset-react

babel-loader 7.x 版本安裝

cnpm install babel-core babel-loader@7 babel-preset-env babel-preset-react --save

安裝的 babel-loader 是7.x版本，8.x版本目前會出現報錯，具體如何解決尚未了解清楚，因此安裝 babel-loader 時須要寫成這樣的 babel-loader@7

babel-loader 8.x 版本安裝

cnpm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react -S

上面爲 babel-loader 8.x 版本安裝，須要匹配下面的 8.x 配置

配置

babel-loader 7.x 版本配置

第一種 全在 webpack.config.js 中配置

rules:[
    {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader',
            options:{
                presets:['env','react']
            }
        },
        // 排除node_modules 文件
        exclude:/node_modules/
    }
]

第二種 新建 .babelrc 文件 （推薦使用第二種）

webpack.config.js

rules:[
    {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader'
        },
        // 排除node_,modules 文件
        exclude:/node_modules/
    }
]

.baelrc

{
    "presets": [
        "env",
        "react"
    ]
}

babel-loader 8.x 版本配置

第一種 全在 webpack.config.js 中配置

rules:[
    {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader',
            options:{
                presets:['"@babel/preset-env','"@babel/preset-react']
            }
        },
        // 排除node_modules 文件
        exclude:/node_modules/
    }
]

第二種 新建 .babelrc 文件 （推薦使用第二種）

webpack.config.js

rules:[
    {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader'
        },
        // 排除node_,modules 文件
        exclude:/node_modules/
    }
]

.baelrc

{
    "presets": [
        ""@babel/preset-env",
        ""@babel/preset-react"
    ]
}

webpack 引入第三方庫

安裝

cnpm install jquery -S

使用

在webpack 3.x 中須要大量配置，可是在webpack中則少了不少

const $ = require("jquery");

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