webpack3從零開始配置過程

PingCAP 發布于2019-08-22 18:25 / 3593人閱讀

摘要：配置過程基本的入口出口配置入口輸出目錄這里使用方法是為了消除跨平臺的差異因為和的絕對路徑表示方式不一樣添加基本的加載器導入中加入對象使用的目標文件。

webpack配置過程 基本的入口出口配置

const webpack = require("webpack");
const path = require("path");
module.exports = {
  entry: {
    main: "./src/main.js",  // 入口
  },
  output: {
    path: path.resolve(__dirname, "dist"),    // 輸出目錄 這里使用path.resolve方法是為了消除跨平臺的差異因為mac和window的絕對路徑表示方式不一樣
    filename: "bundle.js",
  }
}

添加基本的加載器

導入extract-text-webpack-plugin

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const lessExtract = new ExtractTextPlugin("less.css");

module.exports中加入module對象

  module: {
    rules: [
      {
        test: /.(js)$/, // 使用loader的目標文件。這里是.js
        loader: "babel-loader",
        exclude: [
          path.join(__dirname, "../node_modules"),  // 由于node_modules都是編譯過的文件，這里我們不讓babel去處理其下面的js文件
        ],
      },
      {
        test: /.(c)ss$/,
        use: [
          "style-loader", // style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中
          "css-loader", // css-loader 會遍歷 CSS 文件，然后找到 url() 表達式然后處理他們
          "postcss-loader",
        ],
      },
      {
        test: /.less$/,
        loader: lessExtract.extract({
          use: ["css-loader?minimize", "less-loader"],
        }),
      },
    ],
  },
  plugins: [
    lessExtract,
  ],

這個時候就可以看出打包速度異常之慢，同時無法加載antd樣式

配置.babelrc
再plugins中添加解決無法加載antd樣式問題

    [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
    ]

使用HappyPack來優化js得打包(happyPack原理)

導入happypack

const HappyPack = require("happypack");
const os = require("os");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

plugins 中添加如下代碼

    new HappyPack({
      id: "jsHappy",
      verbose: false, //關掉日志
      threadPool: happyThreadPool,
      loaders: [{
        path: "babel-loader",
        query: {
          cacheDirectory: "./node_modules/.webpack_cache",
        },
      }],
    }),

將module.rules 中js得規則改為

      {
        test: /.js?$/,
        exclude: /node_modules/,
        loader: "HappyPack/loader?id=jsHappy",
      },

再次編譯發現編譯時間減少了6s 也就是一倍左右

添加webpack.dll.config.js

很多時候我們并不是都需要每次重新打包所有文件我們只是需要打包我們的源代碼
此時我們就需要這種方式去優化，配置過程很統一，參考以下鏈接

webpack.dll.config.js詳解

事實上這種優化方式只是對生產模式有很大優化，如果是開發模式不如下文中添加--wathch參數的方式

添加electron配置：

由于是使用electron開發桌面應用，所以需要在moudle.export 對象內添加

  target: "electron-renderer",

添加這句話后我們的前端代碼中也可以引用node和electron自帶的一些node_modules
同時直接在瀏覽器中打開入口文件的話，將會報錯啦

啟動

在package.json 中添加這樣一句話

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

這個watch 參數表名了啟動webpack監聽，啟動后每次修改文件采用增量打包的方式自動重新編譯，速度很快

最后附上一篇吐槽webpack得鏈接

GPU云服務器云服務器從零開始 linux從零開始 python從零開始從零開始php

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95839.html

從零開始的webpack生活-0x004：js壓縮混淆

摘要：概述上一章講了關于生成模板的，并且最后將壓縮，這一章講的是壓縮混淆配置環境初始化項目新建修改配置安裝依賴修改初始化添加插件最終配置文件打包配置匹配上的文件才壓縮添加修改打包未被壓縮壓縮了取值正則匹配或者正則匹配數組需要壓 0x001 概述上一章講了關于生成模板html的，并且最后將html壓縮，這一章講的是js壓縮混淆 0x002 配置環境初始化項目 $ npm init -y...

Riddler 2019-08-21 17:27 評論0 收藏0
從零開始最小實現 react 服務器渲染

摘要：從零開始最小實現服務器渲染前言最近在寫的時候想到，如果我部分代碼提供，部分代碼支持，那我應該如何寫呢不想拆成個服務的情況下而且最近寫的項目里面也用過一些服務端渲染，如，自己也搭過的項目，確實開發體驗都非常友好，但是友好歸友好，具體又是如何實 showImg(https://segmentfault.com/img/bVMbjB?w=1794&h=648); 從零開始最小實現 react...

cheukyin 2019-08-22 14:02 評論0 收藏0
webpack4 的開發環境配置說明

摘要：的開發環境配置說明完整的的配置地址開發環境的搭建，總體而言就比較輕松，因為用戶就是開發者們。的做法是在的字段配置類似這樣這樣配置后，當運行時，在里通過可以取到值以來做判斷就可以啦。 webpack4 的開發環境配置說明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 開發環境的搭建，總體而言就比較輕松，因為用戶就是開發者們...

fancyLuo 2019-08-23 10:34 評論0 收藏0
React入門：從零搭建一個React項目

摘要：一初始化項目新建文件夾，文件名文件夾名稱不要用，這類關鍵字，后面使用插件時會發生錯誤。未設置會報一個警告。四在項目中使用安裝。一、初始化項目新建文件夾，文件名firstreact 文件夾名稱不要用react，node這類關鍵字，后面使用插件時會發生錯誤。 init項目環境，項目信息可默認或自行修改 mkdir firstreact cd firstreact npm ...

stackvoid 2019-08-23 15:20 評論0 收藏0
webpack3 升級 webpack4踩坑記錄

摘要：本篇不包含所有坑，暫時只記錄自己踩到的部分坑一安裝安裝最新版本安裝新增依賴這個在中，本身和它的是在同一個包中，中將兩個分開管理。我記錄下自己更新這個的過程，以下前半部分可以直接跳過。以下記錄踩坑過程。本篇不包含所有坑，暫時只記錄自己踩到的部分坑一.安裝安裝webpack4最新版本 npm install --save-dev webpack@4 安裝新增依賴 webpack-c...

馬忠志 2019-08-02 15:38 評論0 收藏0