国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack3從零開始配置過程

PingCAP / 3588人閱讀

摘要：配置過程基本的入口出口配置入口輸出目錄這里使用方法是為了消除跨平臺(tái)的差異因?yàn)楹偷慕^對(duì)路徑表示方式不一樣添加基本的加載器導(dǎo)入中加入對(duì)象使用的目標(biāo)文件。

webpack配置過程 基本的入口出口配置 
const webpack = require("webpack");
const path = require("path");
module.exports = {
  entry: {
    main: "./src/main.js",  // 入口
  },
  output: {
    path: path.resolve(__dirname, "dist"),    // 輸出目錄 這里使用path.resolve方法是為了消除跨平臺(tái)的差異因?yàn)閙ac和window的絕對(duì)路徑表示方式不一樣
    filename: "bundle.js",
  }
}
添加基本的加載器

導(dǎo)入extract-text-webpack-plugin

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

module.exports中加入module對(duì)象

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

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

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

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

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

導(dǎo)入happypack

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

plugins 中添加如下代碼

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

將module.rules 中js得規(guī)則改為

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

再次編譯發(fā)現(xiàn)編譯時(shí)間減少了6s 也就是一倍左右

添加webpack.dll.config.js

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

webpack.dll.config.js詳解

事實(shí)上這種優(yōu)化方式只是對(duì)生產(chǎn)模式有很大優(yōu)化，如果是開發(fā)模式不如下文中添加--wathch參數(shù)的方式

添加electron配置：

由于是使用electron開發(fā)桌面應(yīng)用，所以需要在moudle.export 對(duì)象內(nèi)添加

  target: "electron-renderer",

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

啟動(dòng)

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

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

這個(gè)watch 參數(shù)表名了啟動(dòng)webpack監(jiān)聽，啟動(dòng)后每次修改文件采用增量打包的方式自動(dòng)重新編譯，速度很快

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95839.html

相關(guān)文章

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

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

    Riddler 評(píng)論0 收藏0

  • 從零開始最小實(shí)現(xiàn) react 服務(wù)器渲染

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

    cheukyin 評(píng)論0 收藏0

  • webpack4 的開發(fā)環(huán)境配置說明

    摘要：的開發(fā)環(huán)境配置說明完整的的配置地址開發(fā)環(huán)境的搭建，總體而言就比較輕松，因?yàn)橛脩艟褪情_發(fā)者們。的做法是在的字段配置類似這樣這樣配置后，當(dāng)運(yùn)行時(shí)，在里通過可以取到值以來做判斷就可以啦。 webpack4 的開發(fā)環(huán)境配置說明 完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 開發(fā)環(huán)境的搭建，總體而言就比較輕松，因?yàn)橛脩艟褪情_發(fā)者們...

    fancyLuo 評(píng)論0 收藏0

  • React入門：從零搭建一個(gè)React項(xiàng)目

    摘要：一初始化項(xiàng)目新建文件夾，文件名文件夾名稱不要用，這類關(guān)鍵字，后面使用插件時(shí)會(huì)發(fā)生錯(cuò)誤。未設(shè)置會(huì)報(bào)一個(gè)警告。四在項(xiàng)目中使用安裝。 一、初始化項(xiàng)目 新建文件夾，文件名firstreact 文件夾名稱不要用react，node這類關(guān)鍵字，后面使用插件時(shí)會(huì)發(fā)生錯(cuò)誤。 init項(xiàng)目環(huán)境，項(xiàng)目信息可默認(rèn)或自行修改 mkdir firstreact cd firstreact npm ...

    stackvoid 評(píng)論0 收藏0

  • webpack3 升級(jí) webpack4踩坑記錄

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

    馬忠志 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<